/* 树洞: glassy panel over the home ocean (no camera clip, behaves like #works). */
.treehole{position:fixed;inset:95px 0 60px;z-index:2;display:flex;justify-content:center;padding:0 6vw;opacity:0;visibility:hidden;transform:translateY(18px);transition:opacity .3s ease,transform .4s ease,visibility 0s linear .4s;pointer-events:none}
body.treehole-open .treehole{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .6s ease .35s,transform .8s cubic-bezier(.22,.61,.36,1) .25s,visibility 0s}
.th-panel{width:min(760px,100%);max-height:100%;display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.22);border-radius:16px;background:rgba(10,34,56,.42);backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15);box-shadow:0 18px 50px rgba(2,14,28,.28);overflow:hidden}
.th-head{padding:26px 30px 0;text-shadow:0 1px 10px rgba(3,20,36,.45)}
.th-head h1{font-family:'Songti SC','STSong','Noto Serif SC','SimSun',serif;font-weight:400;font-size:clamp(30px,3vw,42px);line-height:1.3;outline:none}
.th-head p{margin-top:8px;font-size:13px;color:#dbe6ee}
.th-form{padding:18px 30px 20px;border-bottom:1px solid rgba(255,255,255,.16)}
.th-form textarea{width:100%;min-height:92px;max-height:30vh;resize:vertical;padding:14px 16px;border:1px solid rgba(255,255,255,.28);border-radius:10px;background:rgba(255,255,255,.1);color:#fff;font:inherit;font-size:15px;line-height:1.7;outline:none;transition:border-color .2s,background .2s}
.th-form textarea::placeholder{color:rgba(232,240,246,.62)}
.th-form textarea:focus{border-color:rgba(166,234,220,.85);background:rgba(255,255,255,.14)}
.th-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px}
.th-count{font-size:12px;color:#cddbe5;font-variant-numeric:tabular-nums}
.th-count.over{color:#ffb4a8}
.th-submit{border:0;border-radius:6px;background:#f3f0e8;color:#10243b;padding:11px 22px;font-size:15px;font-weight:600;letter-spacing:1px;transition:background .2s,transform .2s,opacity .2s}
.th-submit:hover:not(:disabled){background:#fffaf0;transform:translateY(-1px)}
.th-submit:disabled{opacity:.5;cursor:default}
.th-status{min-height:20px;margin-top:10px;font-size:13px;line-height:1.5;color:#a6eadc}
.th-status.err{color:#ffc2b6}
.th-list{list-style:none;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px 30px 10px;scrollbar-width:thin;scrollbar-color:#ffffff40 transparent}
.th-item{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.th-item:last-child{border-bottom:0}
.th-item p{font-size:15px;line-height:1.75;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;text-shadow:0 1px 6px rgba(3,20,36,.35)}
.th-item time{display:block;margin-top:6px;font-size:12px;color:#b9cad6}
.th-item.fresh{animation:thIn .6s ease}
@keyframes thIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.th-empty{padding:28px 0;text-align:center;font-size:14px;color:#cfdce6}
.th-more{display:block;margin:4px auto 18px;background:none;border:1px solid rgba(255,255,255,.35);border-radius:999px;color:#fff;padding:8px 22px;font-size:13px}
.th-more:hover:not(:disabled){border-color:#fff}
.th-more[hidden]{display:none}
body.treehole-open video#sea{transform:scale(1.06);filter:brightness(.85) blur(3px)}
body.treehole-open .shade{background-color:rgba(4,22,40,.28)}
body.treehole-open .hero{opacity:0;visibility:hidden;transform:translateX(-45px);pointer-events:none;transition:opacity .3s ease,transform .4s ease,visibility 0s linear .4s}
body.treehole-open .back-home{display:inline-block;padding-left:24px;border-left:1px solid #ffffff40}
body.treehole-open #treehole-nav{opacity:1;border-bottom:2px solid #a4e5d9;padding-bottom:9px}
/* night */
body.night .th-panel{background:rgba(4,14,30,.5);border-color:rgba(190,215,255,.18)}
body.night .th-form textarea{background:rgba(255,255,255,.07)}
body.night.treehole-open .shade{background-color:rgba(2,10,24,.4)}
body.night.treehole-open video#sea{filter:brightness(.9) blur(3px)}
@media(max-width:700px){
  .treehole{inset:84px 0 58px;padding:0 4vw}
  .th-head{padding:20px 18px 0}.th-head h1{font-size:28px}.th-head p{font-size:12px}
  .th-form{padding:14px 18px 14px}.th-form textarea{min-height:80px;font-size:15px}
  .th-list{padding:2px 18px 8px}.th-item{padding:13px 0}.th-item p{font-size:14px}
  body.treehole-open nav a:not(#treehole-nav):not(.back-home){display:none}
  body.treehole-open .back-home{margin-left:12px!important;padding-left:12px!important}
}
@media(max-height:650px) and (min-width:701px){.treehole{top:78px;bottom:48px}.th-head{padding-top:16px}.th-form textarea{min-height:64px}}
@media(prefers-reduced-motion:reduce){.treehole{transition:none!important}.th-item.fresh{animation:none}}