/* 听墨斋 · 第二轮全站视觉精修（宣纸宋刻 · 朱印点染 · 四时气韵） */
:root{
  --paper-elevated:#fbf6ea;
  --paper-deep:#ebe1cd;
  --ink-soft:#474136;
  --red-soft:#853b3116;
  --pine:#2b332b;
  --pine-hover:#4b332b;
  --line-strong:#9e8b6e;
  --shadow-soft:0 10px 30px #2b211814;
  --shadow-float:0 16px 44px #241a1226;
}

::selection{background:#853b3126;color:var(--ink)}
html{scroll-behavior:smooth}
body{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(ellipse at 18% 0%,#fff9ec99 0%,transparent 58%),
    radial-gradient(ellipse at 88% 100%,#e5d6bc66 0%,transparent 52%),
    var(--paper);
}
main#view{flex:1;width:100%}

/* 交互基础与触感反馈 */
button,.ink,.file-button,.entries a,.mast nav a,input,textarea,select{
  transition:color .2s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .16s cubic-bezier(.16,1,.3,1);
}
button,.ink,.file-button{
  border-radius:2px;
  white-space:nowrap;
  letter-spacing:.06em;
  box-shadow:inset 0 1px 0 #ffffffb0;
}
button:hover,.file-button:hover{
  border-color:var(--red);
  background:#fffbf2;
}
button:active,.ink:active,.file-button:active{transform:translateY(1px) scale(.99)}
.ink{
  background:var(--pine);
  color:#fbefda;
  border-color:var(--pine);
  padding:.66rem 1.22rem;
  box-shadow:inset 0 1px 0 #ffffff24,0 4px 14px #241c1522;
}
.ink:hover{
  background:var(--pine-hover);
  border-color:var(--pine-hover);
  color:#fff8ec;
}
.quiet{box-shadow:none}
.quiet:hover{background:var(--red-soft)}

/* 顶部卷首导航 */
.mast{
  height:74px;
  backdrop-filter:blur(8px);
  background:linear-gradient(180deg,#f7f1e5f2,#f4eee1eb);
  box-shadow:0 1px 0 #ffffff80,0 6px 20px #2e241908;
}
.brand{gap:.82rem}
.seal{
  padding:.24rem .36rem;
  box-shadow:0 2px 8px #853b3130,inset 0 0 0 1px #fff2dc40;
}
.mast nav a{
  position:relative;
  padding:1.05rem .35rem;
  letter-spacing:.16em;
  color:var(--ink-soft);
}
.mast nav a[aria-current]{
  color:var(--red);
  border-bottom-width:2px;
}
.mast nav a[aria-current]::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:5px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--red);
  transform:translateX(-50%);
}
#profile{
  padding:.32rem .68rem;
  border:1px solid transparent;
  border-radius:2px;
}
#profile:hover{border-color:var(--line)}
#profile img{
  width:30px;
  height:30px;
  border:1px solid var(--line-strong);
  box-shadow:0 2px 6px #2a201822;
}
#profile .name{max-width:7em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 庭院首屏与四时沉浸画境（统一使用林黛玉梅花图 /plum.jpg，叠加四时独立矢量舞台 + 双色着色器 + 宋制牙牌岁时盘） */
.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.hero{
  --px:0;
  --py:0;
  height:min(76dvh,760px);
  min-height:520px;
  border-bottom:1px solid var(--line-strong);
  box-shadow:inset 0 -24px 48px #2b201614;
}
.hero .art{
  background-image:url('/plum.jpg');
  top:-122px;
  bottom:-68px;
  transform:translate3d(calc(var(--px) * -6px),calc(var(--py) * -4px),0) scale(1.015);
  transition:filter .65s ease,transform .35s cubic-bezier(.16,1,.3,1);
}
.hero-stage{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
}
.hero-stage-svg{
  width:100%;
  height:100%;
  display:block;
  transform:translate3d(calc(var(--px) * 10px),calc(var(--py) * 7px),0) scale(1.02);
  transition:transform .28s cubic-bezier(.16,1,.3,1);
}
.hero .atmosphere{z-index:1}
.hero .frame{z-index:2}
.hero .season-caption,.hero .hero-inner,.hero .season{z-index:3}
.hero[data-season=春] .art{
  background-image:url('/plum.jpg');
  background-position:center 43%;
  filter:hue-rotate(-10deg) saturate(1.02) brightness(1.05);
}
.hero[data-season=夏] .art{
  filter:hue-rotate(22deg) saturate(.82) brightness(.97) contrast(1.02);
}
.hero[data-season=秋] .art{
  filter:sepia(.16) saturate(1.06) contrast(1.04);
}
.hero[data-season=冬] .art{
  filter:saturate(.38) brightness(1.12) contrast(1.03);
}
.hero[data-season=春]:before{
  background:
    linear-gradient(90deg,#f5ead8 0%,#f1e3ce 22%,#ecdac2dc 36%,#e4cfb230 66%,#35231a14),
    radial-gradient(ellipse at 76% 22%,#fad4dc4d,transparent 58%),
    linear-gradient(0deg,#3b231d33,transparent 34%);
}
.hero[data-season=夏]:before{
  background:
    linear-gradient(90deg,#e4e6d2 0%,#dfe3ce 22%,#d4dfd0bd 38%,#24483a2b 84%),
    radial-gradient(ellipse at 78% 72%,#416b582e,transparent 55%),
    linear-gradient(0deg,#1d2e2640,transparent 38%);
}
.hero[data-season=秋]:before{
  background:
    linear-gradient(90deg,#efe2cb 0%,#eadac0 22%,#e4ceaee0 36%,#b8652b24 72%,#2e1d1424),
    radial-gradient(ellipse at 74% 24%,#f7cf8638,transparent 54%),
    linear-gradient(0deg,#2e1d143d,transparent 38%);
}
.hero[data-season=冬]:before{
  background:
    linear-gradient(90deg,#f2efe8 0%,#eceae2f0 28%,#e3eaef78 65%,#7a8fa330),
    radial-gradient(ellipse at 78% 18%,#ffffff66,transparent 52%),
    linear-gradient(0deg,#252d3633,transparent 36%);
}
.frame{
  inset:18px;
  border:1px solid #f7ead296;
  outline:1px solid #59463626;
  outline-offset:-5px;
}
.hero-inner{
  left:clamp(34px,8.5vw,138px);
  max-width:min(580px,88%);
  top:46%;
}
.hero h1{
  font-size:clamp(2.55rem,5.6vw,5.6rem);
  line-height:1.14;
  letter-spacing:.06em;
  margin:.2em 0 .22em;
  text-shadow:0 2px 22px #f9efe0cc;
}
.hero p.hero-note{
  font-size:1.06rem;
  color:var(--ink-soft);
  letter-spacing:.16em;
  margin:0 0 .28rem;
}
.hero p.hero-poem{
  font-size:.94rem;
  color:#6c5846;
  letter-spacing:.18em;
  margin:0 0 .5rem;
  padding-left:.65rem;
  border-left:2px solid var(--red);
  opacity:.92;
}
.season-caption{
  position:absolute;
  right:34px;
  top:32px;
  writing-mode:vertical-rl;
  display:flex;
  align-items:center;
  gap:.55rem;
  letter-spacing:.36em;
  color:#fff5e2;
  text-shadow:0 1px 8px #231811;
  background:linear-gradient(180deg,#483125e6,#2e2018d9);
  border:1px solid #f5e4c875;
  border-top:3px solid var(--red);
  padding:.68em .5em .82em;
  border-radius:2px;
  box-shadow:0 10px 26px #1c130d40,inset 0 0 0 1px #ffffff1a;
}
.hero[data-season=春] .season-caption{border-top-color:#c94a63}
.hero[data-season=夏] .season-caption{border-top-color:#48856a;background:linear-gradient(180deg,#263d33e6,#1b2b24d9)}
.hero[data-season=秋] .season-caption{border-top-color:#d46b2c;background:linear-gradient(180deg,#4d2b1de6,#331c13d9)}
.hero[data-season=冬] .season-caption{border-top-color:#88a8c4;background:linear-gradient(180deg,#2c3844e6,#1f2831d9)}
.caption-seal{
  writing-mode:horizontal-tb;
  font-size:.72rem;
  letter-spacing:.08em;
  line-height:1.15;
  padding:.22rem .3rem;
  background:var(--red);
  color:#fff7e8;
  border:1px solid #ffdfba80;
  border-radius:1px;
  box-shadow:0 2px 6px #180f0a45;
}
.caption-text{
  font-size:.94rem;
}

/* 宋制牙牌四时岁时盘（替代原生浏览器 select 白底下拉框） */
.season.season-dock{
  position:absolute;
  bottom:28px;
  right:34px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:.48rem;
  padding:.62rem .76rem .68rem;
  background:
    radial-gradient(ellipse at 15% 0%,#fffdf7f5,transparent 70%),
    linear-gradient(180deg,#faf3e4f2,#efe3cdf2);
  border:1px solid #bfa989;
  outline:1px solid #fffaf0b3;
  outline-offset:-4px;
  border-radius:3px;
  box-shadow:0 12px 34px #22181033,0 2px 8px #22181018;
  backdrop-filter:blur(10px);
  max-width:calc(100vw - 48px);
}
.season-dock-head{
  display:flex;
  align-items:center;
  gap:.55rem;
  padding-bottom:.38rem;
  border-bottom:1px dashed #c8b698;
  font-size:.84rem;
  line-height:1.2;
}
.season-seal{
  background:var(--red);
  color:#fbf2e0;
  padding:.14rem .38rem;
  font-size:.76rem;
  letter-spacing:.16em;
  border-radius:1px;
  box-shadow:inset 0 0 0 1px #fff2dc45;
  flex:none;
}
.season-term{
  color:var(--ink);
  letter-spacing:.12em;
  font-weight:400;
  flex:none;
}
.season-verse{
  color:var(--faded);
  letter-spacing:.08em;
  margin-left:auto;
  padding-left:.5rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.season-tabs{
  display:flex;
  align-items:center;
  gap:.38rem;
  flex-wrap:wrap;
}
.season-tab{
  display:inline-flex;
  align-items:center;
  gap:.36rem;
  padding:.36rem .64rem;
  font-size:.88rem;
  letter-spacing:.08em;
  color:var(--ink-soft);
  background:linear-gradient(180deg,#fffcf5,#f4ead7);
  border:1px solid #cbb899;
  border-radius:2px;
  cursor:pointer;
  box-shadow:inset 0 1px 0 #ffffffcc,0 1px 3px #2b201612;
  position:relative;
}
.season-tab .tab-icon{
  width:15px;
  height:15px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#8c6e54;
  transition:transform .25s ease,color .2s ease;
}
.season-tab .tab-icon svg{
  width:100%;
  height:100%;
  display:block;
}
.season-tab:hover{
  border-color:#9e6b52;
  background:#fffdf8;
  color:var(--ink);
  transform:translateY(-1px);
}
.season-tab:hover .tab-icon{
  transform:rotate(12deg) scale(1.08);
}
.season-tab[data-season-pick="春"] .tab-icon{color:#c44962}
.season-tab[data-season-pick="夏"] .tab-icon{color:#3d7a5a}
.season-tab[data-season-pick="秋"] .tab-icon{color:#c45124}
.season-tab[data-season-pick="冬"] .tab-icon{color:#527896}
.season-tab[aria-checked="true"]{
  background:linear-gradient(180deg,#382c25,#261e19);
  color:#fdf4e3;
  border-color:#261e19;
  box-shadow:inset 0 1px 0 #ffffff26,0 4px 12px #24191138;
}
.season-tab[aria-checked="true"]::after{
  content:"";
  position:absolute;
  left:22%;
  right:22%;
  bottom:-1px;
  height:2px;
  background:#e89b6c;
}
.season-tab[aria-checked="true"] .tab-icon{
  color:#f7d59c;
  transform:scale(1.08);
}
.season-tab[data-season-pick="春"][aria-checked="true"]{
  background:linear-gradient(180deg,#7a2e3d,#541e29);
  border-color:#4a1923;
}
.season-tab[data-season-pick="夏"][aria-checked="true"]{
  background:linear-gradient(180deg,#2c5240,#1d382b);
  border-color:#183024;
}
.season-tab[data-season-pick="秋"][aria-checked="true"]{
  background:linear-gradient(180deg,#7d341c,#572211);
  border-color:#4a1c0d;
}
.season-tab[data-season-pick="冬"][aria-checked="true"]{
  background:linear-gradient(180deg,#324554,#22303c);
  border-color:#1b2730;
}

/* 纸面主容器与卷首标题 */
.paper{
  max-width:1060px;
  margin:0 auto;
  padding:56px clamp(20px,4.5vw,44px) 96px;
}
.heading{
  position:relative;
  padding-bottom:18px;
  margin-bottom:14px;
  border-bottom:1px solid var(--line-strong);
}
.heading::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-4px;
  border-bottom:1px solid var(--line);
}
.heading h1,.heading h2{
  letter-spacing:.05em;
  line-height:1.18;
}

/* 尺牍篇章列表与空卷状态 */
.entries li{list-style:none}
.entries a{
  grid-template-columns:7.5rem 1fr auto;
  gap:22px;
  padding:22px 14px;
  border-bottom:1px solid var(--line);
  border-radius:2px;
  position:relative;
}
.entries time{
  font-size:.95rem;
  letter-spacing:.08em;
  color:var(--faded);
  border-left:2px solid #853b3155;
  padding-left:.65rem;
}
.entries h3{
  font-size:1.42rem;
  letter-spacing:.03em;
  margin:0 0 .32rem;
  color:var(--ink);
}
.entries p{
  line-height:1.65;
  font-size:.98rem;
}
.stamp{
  background:#fff9ee;
  border:1px solid #853b3199;
  box-shadow:inset 0 0 0 2px #f4eee1;
  padding:.18rem .46rem;
  letter-spacing:.14em;
  border-radius:1px;
}
p.muted{
  line-height:1.75;
}
#archiveEntries > p.muted,.paper > p.muted{
  margin:1.8rem 0;
  padding:2.4rem 1.5rem;
  text-align:center;
  background:linear-gradient(180deg,#faf3e480,#f2e8d550);
  border:1px dashed var(--line-strong);
  border-radius:2px;
  letter-spacing:.12em;
}

/* 检索栏 */
.archive-bar{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  margin:1.3rem 0 .8rem;
}
.archive-search{
  flex:1;
  max-width:340px;
  margin:0;
  color:var(--faded);
  font-size:.92rem;
  letter-spacing:.08em;
}
.archive-bar .muted{
  margin:0 0 .45rem;
  font-size:.92rem;
  letter-spacing:.1em;
}

/* 诗词画境与文章阅读页（11 景各自独立画卷 + 独立 WebGL 着色器） */
.chapter[data-scene=plain]{--painting:url('/scene-plain.svg')}
.chapter[data-scene=jasmine]{--painting:url('/jasmine-court.svg')}
.chapter[data-scene=study]{--painting:url('/scene-study.svg')}
.chapter[data-scene=sword]{--painting:url('/scene-sword.svg')}
.chapter[data-scene=rain]{--painting:url('/scene-rain.svg')}
.chapter[data-scene=moon]{--painting:url('/scene-moon.svg')}
.chapter[data-scene=river]{--painting:url('/scene-river.svg')}
.chapter[data-scene=lotus]{--painting:url('/scene-lotus.svg')}
.chapter[data-scene=snow]{--painting:url('/scene-snow.svg')}
.chapter[data-scene=peach]{--painting:url('/scene-peach.svg')}
.chapter[data-scene=autumn]{--painting:url('/scene-autumn.svg')}
.chapter{
  min-height:356px;
  padding:56px 24px 52px;
  border-bottom:1px solid var(--line-strong);
  box-shadow:inset 0 -24px 44px #2d221818;
}
.chapter[data-scene=study]:after,.chapter[data-scene=sword]:after{content:none}
.chapter:is([data-scene=plain],[data-scene=jasmine],[data-scene=river],[data-scene=lotus],[data-scene=snow],[data-scene=peach]){
  color:var(--ink);
  background:radial-gradient(ellipse at 50% 46%,#f8f0dad8 0%,#f6edcf78 46%,transparent 76%),var(--painting) center/cover no-repeat;
  text-shadow:0 1px 14px #fffdf6e6;
}
.chapter:is([data-scene=study],[data-scene=sword],[data-scene=rain],[data-scene=moon]){
  color:#fff2dc;
  background:radial-gradient(ellipse at 50% 46%,#18222ba8 0%,#18222b4d 52%,transparent 78%),var(--painting) center/cover no-repeat;
  text-shadow:0 2px 16px #0f141ae6;
}
.chapter[data-scene=autumn]{
  color:#fff4e2;
  background:radial-gradient(ellipse at 50% 46%,#3d2418bf 0%,#3d241866 52%,transparent 80%),var(--painting) center/cover no-repeat;
  text-shadow:0 2px 16px #26140ce6;
}
.chapter:is([data-scene=study],[data-scene=sword],[data-scene=rain],[data-scene=moon],[data-scene=autumn]):before{
  background:linear-gradient(0deg,#1f1c1aa8,transparent 54%);
}
.chapter:is([data-scene=study],[data-scene=sword],[data-scene=rain],[data-scene=moon],[data-scene=autumn]) .overline{color:#ffe0b5}
.chapter[data-scene=sword] .overline{color:#ffbfa8}
.chapter h1{
  letter-spacing:.05em;
  line-height:1.22;
  max-width:22ch;
  margin:.28em auto;
}
.chapter time{
  letter-spacing:.18em;
  font-size:.92rem;
  opacity:.86;
}
.verse{
  margin:.68rem auto 0;
  letter-spacing:.22em;
  font-size:.95rem;
  opacity:.88;
}

/* 正文排版与册页媒体装裱 */
.article{
  max-width:780px;
  font-size:1.18rem;
  line-height:2.02;
}
.article .tools,.tools{
  align-items:center;
}
.article > .tools{
  padding-bottom:1.1rem;
  margin:0 0 2rem;
  border-bottom:1px solid var(--line);
  justify-content:space-between;
}
.article > .tools a{
  padding:.36rem .75rem;
  border:1px solid var(--line);
  background:var(--paper-elevated);
  border-radius:2px;
  font-size:.94rem;
}
.article > .tools a:hover{border-color:var(--red)}
.article > .tools #remove{
  margin-left:auto;
  color:var(--faded);
  font-size:.92rem;
}
.article > .tools #remove:hover{color:var(--red)}
.article h1,.article h2,.article h3{
  font-weight:400;
  letter-spacing:.04em;
  line-height:1.35;
  margin:1.6em 0 .6em;
  color:var(--ink);
}
.article h1{font-size:1.85rem;border-bottom:1px solid var(--line);padding-bottom:.3em}
.article h2{font-size:1.52rem}
.article h3{font-size:1.28rem}
.article p{margin:0 0 1.15em}
.article blockquote{
  border-left:3px solid var(--red);
  background:linear-gradient(90deg,#ebe1cd90,transparent);
  margin:1.4em 0;
  padding:.75rem 1.25rem;
  color:var(--ink-soft);
}
.article blockquote p:last-child{margin-bottom:0}
.article code{
  background:var(--paper-deep);
  padding:.12em .4em;
  border-radius:2px;
  font-size:.92em;
}
.article pre{
  background:var(--paper-deep);
  border:1px solid var(--line);
  border-left:3px solid var(--pine);
  padding:1rem 1.2rem;
  border-radius:2px;
}
.article pre code{background:none;padding:0}
.article hr{
  border:0;
  border-top:1px solid var(--line-strong);
  margin:2.2rem auto;
  width:42%;
}
.article ul,.article ol{padding-left:1.5em}
.article li{margin:.35em 0}
.katex-display{
  margin:1.35em 0;
  padding:.65rem .9rem;
  background:#faf3e488;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
#media{
  display:grid;
  gap:1.4rem;
  margin-top:2rem;
}
#media:empty{display:none}
.article img,.article video{
  display:block;
  padding:8px;
  background:var(--paper-elevated);
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow-soft);
}

/* 执笔编辑器 */
.editor{
  gap:1.25rem;
  margin-top:1.2rem;
}
label{
  gap:.45rem;
  font-size:.95rem;
  letter-spacing:.06em;
  color:var(--ink-soft);
}
input,textarea,select{
  padding:.68rem .82rem;
  background:var(--paper-elevated);
  border:1px solid #b4a48a99;
  border-radius:2px;
  color:var(--ink);
  box-shadow:inset 0 1px 2px #2b21180a;
}
input::placeholder,textarea::placeholder{color:#8a7f6d}
input:focus,textarea:focus,select:focus{
  border-color:var(--red);
  background:#fffdf7;
  box-shadow:0 0 0 3px var(--red-soft);
  outline:none;
}
.editor input[name=title]{
  font-size:1.35rem;
  padding:.72rem .88rem;
  letter-spacing:.04em;
}
.editor textarea{
  min-height:280px;
  line-height:1.95;
  font-size:1.08rem;
  background-image:repeating-linear-gradient(transparent,transparent 2.08rem,#b4a48a28 2.08rem,#b4a48a28 calc(2.08rem + 1px));
  background-attachment:local;
}
.scene-hint{
  font-size:.94rem;
  color:var(--ink-soft);
  min-height:1.6em;
  padding:.48rem .8rem;
  background:linear-gradient(90deg,#ebe1cd90,transparent);
  border-left:2px solid var(--red);
}
#retained{display:grid;gap:.55rem}
#retained:empty{display:none}
.attachment{
  justify-content:space-between;
  padding:.45rem .75rem;
  background:var(--paper-elevated);
  border:1px solid var(--line);
  border-radius:2px;
  font-size:.92rem;
}
.preview{
  margin-top:.8rem;
  padding:1.4rem;
  background:var(--paper-elevated);
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow-soft);
}
.preview .chapter{min-height:220px;margin-bottom:1.4rem}

/* 右下唱片机浮岛与曲库弹窗 */
.player{
  right:22px;
  bottom:20px;
  gap:11px;
  background:linear-gradient(180deg,#fbf4e4,#f2e6cf);
  border:1px solid var(--line-strong);
  outline:1px solid #fff8eb;
  outline-offset:-4px;
  border-radius:2px;
  padding:8px 12px 8px 9px;
  box-shadow:var(--shadow-float);
}
.record{
  width:46px;
  height:46px;
  flex:none;
  box-shadow:0 3px 10px #1f191438;
}
.now{max-width:152px;gap:1px}
.now small{font-size:.72rem;letter-spacing:.18em}
.now button{padding:.1rem 0;font-size:.96rem}
.player .skip{
  background:transparent;
  border:0;
  box-shadow:none;
  padding:.25rem .38rem;
  font-size:1.4rem;
  line-height:1;
}
.play{
  border-radius:50%;
  width:36px;
  height:36px;
  padding:0;
  background:var(--pine);
  color:#fbefda;
  border-color:var(--pine);
}
.play:hover{
  background:var(--red);
  border-color:var(--red);
  color:#fff;
}

/* 弹窗（斋中听曲 & 斋主小像） */
dialog{
  width:min(510px,calc(100% - 28px));
  padding:26px 26px 24px;
  background:
    radial-gradient(ellipse at 50% 0%,#fffaf0,transparent 70%),
    var(--paper);
  border:1px solid var(--line-strong);
  outline:1px solid var(--line);
  outline-offset:-6px;
  border-radius:2px;
  box-shadow:0 22px 60px #19130e45;
}
dialog::backdrop{
  background:#1f1a15a8;
  backdrop-filter:blur(3px);
}
.dialoghead{
  padding-bottom:.75rem;
  margin-bottom:1rem;
  border-bottom:1px solid var(--line);
}
.dialoghead h2{
  font-size:1.55rem;
  letter-spacing:.08em;
}
#musicStatus{
  min-height:1.3rem;
  font-size:.9rem;
  color:var(--ink-soft);
  margin:.4rem 0;
}
#tracks{
  margin:.65rem 0;
  border:1px solid var(--line);
  background:var(--paper-elevated);
  max-height:248px;
}
#tracks li{
  display:flex;
  align-items:stretch;
  border-bottom:1px solid var(--line);
}
#tracks li:last-child{border-bottom:0}
#tracks li button{
  border:0;
  box-shadow:none;
  padding:.62rem .8rem;
}
#tracks li button:first-child{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
#tracks button[aria-current=true]{
  color:var(--red);
  background:#ece0ca;
  border-left:3px solid var(--red);
}
#tracks .track-remove{
  width:auto;
  flex:none;
  font-size:.82rem;
  color:var(--faded);
  padding:.25rem .7rem;
}
#tracks .track-remove:hover{color:var(--red)}
.backup{
  margin-top:1.45rem;
  padding-top:1.15rem;
  border-top:1px solid var(--line-strong);
}
.backup h3{
  margin:0;
  font-weight:400;
  font-size:1.2rem;
  letter-spacing:.06em;
}
.backup p{
  margin:.45rem 0;
  font-size:.9rem;
  line-height:1.65;
}
.backup .tools{margin:.85rem 0 0}
.file-button{
  display:inline-block;
  position:relative;
  margin:0;
  border:1px solid var(--line-strong);
  padding:.55rem .92rem;
  background:var(--paper-elevated);
  cursor:pointer;
}
.file-button input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
  width:100%;
}
.file-button:focus-within{
  outline:2px solid var(--red);
  outline-offset:4px;
}
.notice{
  bottom:82px;
  right:22px;
  background:#fbf4e4;
  border:1px solid var(--red);
  border-left-width:3px;
  box-shadow:var(--shadow-float);
  letter-spacing:.05em;
}
.foot{
  padding:24px clamp(22px,6vw,96px) 88px;
  letter-spacing:.1em;
}

/* 动效与无障碍降级 */
@media(prefers-reduced-motion:no-preference){
  .hero-inner{animation:ink-appear .55s ease both}
  .hero-stage-svg{animation:stage-fade .6s ease both}
  .chapter h1{animation:ink-appear .38s ease both}
  .stage-sway{
    transform-origin:100% 10%;
    animation:stage-sway-anim 7.5s ease-in-out infinite alternate;
  }
  .stage-sway-slow{
    transform-origin:85% 0%;
    animation:stage-sway-slow-anim 9.5s ease-in-out infinite alternate;
  }
  @keyframes ink-appear{
    from{opacity:0;transform:translateY(6px);filter:blur(2px)}
    to{opacity:1;transform:translateY(0);filter:blur(0)}
  }
  @keyframes stage-fade{
    from{opacity:0}
    to{opacity:1}
  }
  @keyframes stage-sway-anim{
    from{transform:rotate(-.65deg) translateY(-2px)}
    to{transform:rotate(.75deg) translateY(3px)}
  }
  @keyframes stage-sway-slow-anim{
    from{transform:rotate(.5deg) translateX(2px)}
    to{transform:rotate(-.7deg) translateX(-3px)}
  }
}

/* 移动端收敛与单栏响应式 */
@media(max-width:650px){
  .mast{height:60px;padding:0 14px}
  .mast nav{gap:14px}
  .mast nav a{padding:.85rem .2rem;letter-spacing:.08em}
  #profile{padding:.25rem .4rem}
  #profile img+.name{display:none}
  #profile .name{max-width:3.4em}
  .hero{min-height:560px;height:78svh}
  .hero .art{top:-98px;bottom:-58px;background-position:60% center}
  .hero[data-season=春] .art{background-position:60% center}
  .hero-inner{left:24px;right:24px;width:auto;max-width:none;top:40%}
  .hero h1{font-size:clamp(2.05rem,9.2vw,3.25rem)}
  .hero p.hero-poem{font-size:.84rem;letter-spacing:.1em}
  .season-caption{right:20px;top:22px;padding:.5em .36em}
  .season.season-dock{
    left:18px;
    right:18px;
    bottom:18px;
    padding:.48rem .56rem .52rem;
    max-width:none;
  }
  .season-dock-head{font-size:.78rem}
  .season-verse{display:none}
  .season-tabs{gap:.28rem;justify-content:space-between}
  .season-tab{padding:.3rem .44rem;font-size:.78rem;letter-spacing:.03em;flex:1;justify-content:center}
  .season-tab .tab-icon{width:13px;height:13px}
  .paper{padding:34px 20px 88px}
  .entries a{padding:16px 8px;gap:8px}
  .entries time{border-left:0;padding-left:0}
  .player{right:12px;bottom:12px;max-width:calc(100vw - 24px)}
  .now{max-width:118px}
  dialog{padding:20px 18px}
}