html.personal-font body,html.personal-font :is(button,input,textarea,select,.name){font-family:"Tingmo Personal","Shoujin","KaiTi",serif}
.hero.custom-hero .art,.hero.custom-hero[data-season] .art{background-image:none}
.custom-hero .custom-hero-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center 48%}
.community-page{padding-block:clamp(1.5rem,5vw,3.8rem)}
.person-heading h1{font-weight:400;font-size:clamp(2.2rem,6vw,4.4rem);margin:.2em 0}
.person-heading{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(.65rem,4vw,2rem);align-items:center}
.person-avatar{width:clamp(3.4rem,12vw,7rem);aspect-ratio:1;border:1px solid #9b8163;display:grid;place-items:center;color:#965346;font-size:2.35rem;background:#9e765515;overflow:hidden}
.person-avatar img{width:100%;height:100%;object-fit:cover}
.person-id{margin:0;overflow-wrap:anywhere}
.person-id code{font-size:.85em}
.person-counts{display:flex;flex-wrap:wrap;gap:1.5rem;padding-block:.85rem;margin-block:1rem;border-block:1px solid var(--line)}
.person-counts strong{font-weight:400;color:#934f41}
.person-search{display:flex;gap:.6rem;align-items:end;margin-block:1.1rem}
.person-search label{min-width:0}
.person-settings{padding:.8rem 0;border-block:1px solid var(--line)}
.person-settings summary{cursor:pointer;color:#864c41}
.person-settings form{display:grid;gap:1rem;margin-top:1rem;max-width:42rem}
#cloudBridge{border-top:1px solid var(--line);margin-top:1rem;padding-top:.6rem}
@media(max-width:580px){
  .person-heading{grid-template-columns:auto 1fr}
  .person-heading>button,.person-heading>a{grid-column:2;justify-self:start}
  .mast nav{flex-wrap:wrap}
}
.person-landscape{display:block;width:100%;height:clamp(5rem,17vw,12rem);object-fit:cover;margin-bottom:1.25rem;object-position:center 48%}

/* 斋门名帖 */
.account-paper{max-width:65rem}
.account-folio{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.18fr);
  border:1px solid var(--line-strong);
  background:var(--paper-elevated);
  box-shadow:var(--shadow-soft);
}
.account-plate{
  position:relative;
  isolation:isolate;
  display:grid;
  align-content:space-between;
  justify-items:start;
  gap:1.1rem;
  min-width:0;
  padding:clamp(1.7rem,4vw,3.1rem);
  color:#f3e7ce;
  background:#2c3530 url('/scene-study.svg') 65% bottom / auto 75% no-repeat;
}
.account-plate::before,.account-plate::after{
  content:"";
  position:absolute;
  pointer-events:none;
}
.account-plate::before{
  inset:0;
  z-index:-1;
  background:linear-gradient(155deg,#2c3530 10%,#2c3530d1 42%,#211f1a50 75%,#211f1a89);
}
.account-plate::after{
  inset:.65rem;
  border:1px solid #ddc9a650;
}
.account-plate-index{font-size:.8rem;letter-spacing:.2em}
.account-plate-index span{color:#e4aa94}
.account-plate-script{
  display:flex;
  flex-direction:column;
  writing-mode:vertical-rl;
  justify-self:end;
  align-self:center;
  font-size:clamp(2rem,3.6vw,3.4rem);
  letter-spacing:.17em;
  line-height:1.18;
  text-shadow:0 1px 14px #1e251e;
}
.account-plate-seal,.arrival-seal{
  display:grid;
  place-items:center;
  width:2.75rem;
  aspect-ratio:1;
  border:1px solid currentColor;
  outline:1px solid currentColor;
  outline-offset:-4px;
  color:#ebad96;
  transform:rotate(-5deg);
}
.account-sheet{
  min-width:0;
  padding:clamp(1.5rem,4vw,3rem);
  background:radial-gradient(ellipse at 100% 0%,#eddfc7a1,transparent 53%);
}
.account-title h1{
  font-size:clamp(2.15rem,5vw,3.65rem);
  line-height:1.15;
  letter-spacing:.05em;
  font-weight:400;
  margin:.26em 0 .34em;
}
.account-title p{color:var(--ink-soft);margin:0;max-width:28em}
.account-tabs{
  display:flex;
  gap:1.35rem;
  border-bottom:1px solid var(--line-strong);
  margin-top:1.15rem;
}
.account-tabs button{
  position:relative;
  min-height:2.75rem;
  padding:.3rem .5rem;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
}
.account-tabs button::after{
  content:"";
  position:absolute;
  inset:auto .25rem -1px;
  border-bottom:2px solid currentColor;
  transform:scaleX(0);
  transform-origin:left;
}
.account-tabs button[aria-pressed=true]{color:var(--red)}
.account-tabs button[aria-pressed=true]::after{transform:scaleX(1)}
.account-sheet form{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:.35rem;
  margin-top:1rem;
}
.account-sheet form label{
  display:block;
  color:var(--ink-soft);
}
.account-sheet form label:not(:first-child){margin-top:.28rem}
.account-sheet form label small{margin-left:.35rem}
.account-sheet input{
  width:100%;
  min-height:2.75rem;
  font-size:1rem;
  border-color:var(--line-strong);
  box-shadow:inset 0 -2px transparent;
}
.account-sheet input:focus{
  outline:none;
  border-color:var(--red);
  box-shadow:inset 0 -2px var(--red);
}
.account-hint{
  margin:0 0 .2rem;
  font-size:.9rem;
  color:var(--faded);
  line-height:1.4;
}
.account-sheet button:disabled{cursor:wait;opacity:.65}
.account-sheet form>button{
  margin-top:.6rem;
  min-height:2.75rem;
  justify-self:start;
  display:inline-flex;
  gap:1.4rem;
  align-items:center;
}
.account-sheet form>button span{font-family:serif}
.account-challenge{margin-top:.45rem;min-width:0}
.account-sheet output{
  min-height:1.4em;
  color:var(--red);
  overflow-wrap:anywhere;
}
.account-arrival{
  position:fixed;
  z-index:10;
  inset:calc(5rem + env(safe-area-inset-top)) auto auto 50%;
  transform:translateX(-50%);
  width:max-content;
  max-width:calc(100vw - 2rem);
  display:flex;
  align-items:center;
  gap:.85rem;
  padding:.7rem 1.05rem;
  background:var(--paper-elevated);
  border:1px solid var(--line-strong);
  outline:1px solid var(--line);
  outline-offset:-5px;
  box-shadow:var(--shadow-float);
  color:var(--ink);
  pointer-events:none;
}
.arrival-seal{flex:none;color:var(--red)}
@media(max-width:760px){
  .account-folio{grid-template-columns:minmax(0,1fr)}
  .account-plate{
    grid-template-columns:1fr auto;
    grid-template-areas:"index seal" "script seal";
    align-items:center;
    gap:.3rem .75rem;
    padding:1.35rem;
    background-size:cover;
    background-position:center 56%;
  }
  .account-plate-index{grid-area:index}
  .account-plate-script{
    grid-area:script;
    writing-mode:horizontal-tb;
    flex-direction:row;
    flex-wrap:wrap;
    column-gap:.65em;
    justify-self:start;
    font-size:clamp(1.1rem,5vw,1.6rem);
  }
  .account-plate-seal{grid-area:seal}
  .account-arrival{inset-block-start:calc(6.25rem + env(safe-area-inset-top))}
}
@media(max-width:360px){
  .account-paper{padding-inline:14px}
  .account-sheet{padding-inline:14px}
  .person-search{align-items:stretch;flex-direction:column}
  .person-search button{align-self:start}
}
@media(prefers-reduced-motion:no-preference){
  .account-tabs button::after{transition:transform .24s ease}
  .account-sheet form{animation:account-ink .27s ease both}
  .account-arrival{animation:account-arrival 2.5s both}
  .arrival-seal{animation:account-stamp .32s .1s cubic-bezier(.2,.75,.3,1) both}
  .person-settings[open] form{animation:account-ink .22s ease both}
  .person-landscape{animation:person-unfold .45s ease-out both}
  #owner[open]{animation:owner-open .24s ease-out both}
  #music[open]{animation:account-ink .2s ease-out both}
  @keyframes account-ink{from{opacity:.35}}
  @keyframes account-arrival{
    0%{opacity:0;translate:0 -.4rem}
    9%,87%{opacity:1;translate:0}
    100%{opacity:0}
  }
  @keyframes account-stamp{
    from{opacity:0;transform:scale(1.45) rotate(8deg)}
    62%{opacity:1;transform:scale(.93) rotate(-7deg)}
    to{transform:rotate(-5deg)}
  }
  @keyframes person-unfold{from{opacity:.45;clip-path:inset(0 0 0 4%)}}
  @keyframes owner-open{from{opacity:.45;translate:0 .45rem}}
}