/* 平台外壳：电脑上左侧是一条竖着的星路，手机上是底部四个按钮。颜色都来自 theme.css。 */
:root{
 --pf-serif:"Songti SC","STSong","Noto Serif CJK SC","Source Han Serif SC","SimSun",serif;
 --pf-sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;
 --pf-side:240px;--pf-bar:60px;
}
#pf-sky{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
#pf-fx{position:fixed;inset:0;width:100%;height:100%;z-index:200;pointer-events:none}
html.pf-fade *{transition:background-color .8s,border-color .8s,color .6s,fill .8s,stroke .8s!important}
.pf-side,.pf-bottom{box-sizing:border-box;font-family:var(--pf-sans);color:var(--pf-ink)}
.pf-side *,.pf-bottom *{box-sizing:border-box}
.pf-side h2{margin:0}
.pf-side a,.pf-bottom a{color:inherit;text-decoration:none}
.pf-mode{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:color-mix(in oklab,var(--pf-ink) 9%,transparent);box-shadow:inset 0 0 0 1px var(--pf-hair)}
.pf-mode button{display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:0 10px;border:0;border-radius:999px;background:none;color:var(--pf-muted);font:500 12px var(--pf-sans);cursor:pointer;-webkit-tap-highlight-color:transparent}
.pf-mode button[aria-pressed=true]{background:var(--pf-gold);color:var(--pf-on)}
.pf-mode button:focus-visible{outline:2px solid var(--pf-em);outline-offset:1px}

/* —— 手机和窄屏：底部四个按钮 —— */
.pf-side{display:none}
.pf-bottom{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(4,1fr);min-height:calc(var(--pf-bar) + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:color-mix(in oklab,var(--pf-solid) 74%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border-top:1px solid var(--pf-hair)}
.pf-bottom a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:var(--pf-bar);font-size:11.500px;letter-spacing:.06em;color:var(--pf-muted);-webkit-tap-highlight-color:transparent}
.pf-bottom a[aria-current]{color:var(--pf-em)}
.pf-bottom a[aria-current] svg{filter:drop-shadow(0 0 7px var(--pf-em))}
.pf-bottom em{position:absolute;top:6px;left:calc(50% + 7px);min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--pf-gold);color:var(--pf-on);font:600 11px/17px var(--pf-sans);text-align:center}
body.pf{padding-bottom:calc(var(--pf-bar) + env(safe-area-inset-bottom,0px))}

/* —— 电脑：左侧星路 —— */
@media (min-width:960px){
 body.pf{padding-bottom:0;padding-left:var(--pf-side)}
 .pf-bottom{display:none}
 .pf-side{position:fixed;left:0;top:0;bottom:0;z-index:60;width:var(--pf-side);display:flex;flex-direction:column;gap:10px;padding:20px 14px 10px;background:color-mix(in oklab,var(--pf-solid) 58%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border-right:1px solid var(--pf-hair)}
 .pf-brand{display:flex;align-items:center;margin:-14px -8px 0 -10px;color:inherit;text-decoration:none}
 .pf-brand img{flex:none;width:104px;height:104px;transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
 .pf-brand:hover img{transform:rotate(-5deg) scale(1.05)}
 .pf-brand small{display:block;margin:-6px 0 0 6px;font-size:10.500px;letter-spacing:.14em;color:var(--pf-muted);white-space:nowrap}
 @media (max-height:760px){.pf-brand img{width:82px;height:82px}.pf-brand .pf-word{width:96px;height:54px}}
 .pf-today,.pf-me{display:flex;align-items:center;gap:10px;min-height:38px;padding:0 10px;border-radius:10px;font-size:13.500px;letter-spacing:.04em}
 .pf-today em{margin-left:auto;min-width:22px;height:20px;padding:0 6px;border-radius:10px;background:var(--pf-gold);color:var(--pf-on);font:600 11.500px/20px var(--pf-sans);text-align:center}
 .pf-today:hover,.pf-me:hover,.pf-st[href]:hover{background:color-mix(in oklab,var(--pf-ink) 8%,transparent)}
 .pf-today[aria-current],.pf-me[aria-current]{background:color-mix(in oklab,var(--pf-ink) 9%,transparent);box-shadow:inset 0 0 0 1px var(--pf-hair)}
 .pf-lines{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:grid;align-content:start;gap:12px;padding:2px 0;scrollbar-width:none}
 .pf-lines::-webkit-scrollbar{display:none}
 .pf-group h2{padding:0 10px 3px;font:500 10.500px/1.6 var(--pf-sans);letter-spacing:.22em;color:var(--pf-muted)}
 .pf-group ol{position:relative;list-style:none;margin:0;padding:0}
 .pf-group ol::before{content:"";position:absolute;left:15.500px;top:15px;bottom:15px;width:1px;background:linear-gradient(var(--c),color-mix(in oklab,var(--c) 35%,transparent))}
 .pf-group ol:has(li:only-child)::before{display:none}
 .pf-st{position:relative;display:flex;align-items:center;gap:12px;min-height:29px;padding:0 10px;border-radius:8px;font-size:13px;letter-spacing:.02em}
 .pf-st i{position:relative;flex:none;width:12px;height:12px;border-radius:50%;border:1.500px solid var(--c);background:var(--pf-solid)}
 .pf-st.st-go i{background:conic-gradient(var(--c) var(--p,0%),var(--pf-solid) 0)}
 .pf-st.st-solid i{background:var(--c);box-shadow:0 0 9px var(--c)}
 .pf-st[aria-current]{background:color-mix(in oklab,var(--c) 15%,transparent)}
 .pf-st[aria-current] i{box-shadow:0 0 0 3px color-mix(in oklab,var(--c) 30%,transparent),0 0 10px var(--c)}
 .pf-side .pf-mode{align-self:center;margin-top:2px}
 .pf-side .pf-mode span{display:none}
 .pf-side .pf-mode button{padding:0 14px}
 .pf-me{border-top:1px solid var(--pf-hair);border-radius:0;padding-top:6px;min-height:42px;color:var(--pf-muted)}
 .pf-me span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (prefers-reduced-motion:no-preference){.pf-st,.pf-today,.pf-me{transition:background-color .2s}}
.pf-side a:focus-visible,.pf-bottom a:focus-visible{outline:2px solid var(--pf-em);outline-offset:1px}
/* 字标是设计图上的毛笔字，做成浮雕：夜里鎏金，白天墨绿镶金边 */
.pf-word{display:block;width:112px;height:62px;background:url(/shared/art/word-day.webp) left center/contain no-repeat}
html[data-mode="night"] .pf-word{background-image:url(/shared/art/word-night.webp)}