/* 创作记录 pages. Pixel type only where it is short and crisp at 2x (header,
   page title at 32px, dates, tags); everything you actually read is a normal
   system font at 18px, so the look stays the island's but long text is easy. */
@font-face{font-family:RoundPix;src:url(fonts/ZLabsRoundPix_16px_M_CN.ttf.woff2) format("woff2");font-display:swap}
:root{--ink:#181425;--muted:#5a6988;--paper:#f4efe4;--card:#fff;--hl:#f77622;--sun:#feae34}
*{box-sizing:border-box}
html{background:#efe9dc}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;color:var(--ink);font:16px/28px RoundPix,"PingFang SC",system-ui,sans-serif;-webkit-font-smoothing:none}
html[lang=en] .l-zh,html:not([lang=en]) .l-en{display:none}
a{color:#be4a2f}
.nbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px clamp(16px,4vw,40px);border-bottom:4px solid var(--ink);background:var(--paper);position:sticky;top:0;z-index:2}
.nbar .brand{display:flex;align-items:center;gap:8px;text-decoration:none}
.nbar .brand canvas.mark{width:40px!important;height:40px!important}
.nbar .brand .word{display:flex;flex-direction:column;gap:2px}
.nbar .brand .wm-en{width:107px;height:27px;image-rendering:pixelated}.nbar .brand .wm-zh{width:74px;height:17px;image-rendering:pixelated}
html[lang=en] .nbar .brand .wm-zh{display:none!important}
.nbar nav{display:flex;gap:8px;align-items:center}
.nbar nav a,.langBtn{font:16px/16px RoundPix,monospace;color:var(--ink);text-decoration:none;background:#fff;border:3px solid var(--ink);box-shadow:3px 3px 0 #18142555;padding:8px 10px;cursor:pointer}
.nbar nav a:hover,.langBtn:hover{background:#fee761}
main{flex:1;width:100%;max-width:720px;margin:0 auto;padding:32px clamp(16px,4vw,40px) 48px}
h1{font-size:32px;line-height:44px;font-weight:400;margin:8px 0 22px}
h2{font:600 22px/1.45 "PingFang SC","Hiragino Sans GB",system-ui,sans-serif;margin:36px 0 10px;-webkit-font-smoothing:antialiased}
h3{font:600 19px/1.5 "PingFang SC","Hiragino Sans GB",system-ui,sans-serif;margin:26px 0 6px;color:#be4a2f;-webkit-font-smoothing:antialiased}
.intro p{color:var(--muted);font-size:17px;line-height:1.8}
.notes{display:grid;gap:14px;margin-top:20px}
.note-card{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:3px solid var(--ink);box-shadow:4px 4px 0 #18142533;padding:12px 14px;text-decoration:none;color:var(--ink)}
.note-card:hover{background:#fff7ec;transform:translate(-1px,-1px)}
.note-card>span{display:flex;flex-direction:column;gap:2px}
.note-card time,.meta time{color:var(--muted);font-size:16px}
.note-card b{font:600 19px/1.5 "PingFang SC","Hiragino Sans GB",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.note-card span span{color:var(--muted)}
html[lang=en] .note-card b.l-zh,html[lang=en] .note-card span.l-zh,html:not([lang=en]) .note-card b.l-en,html:not([lang=en]) .note-card span.l-en{display:none}
.meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0}
.tag{background:var(--sun);padding:0 6px;font-size:14px;line-height:22px}
.video{position:relative;aspect-ratio:16/9;border:3px solid var(--ink);background:#000;margin:8px 0 12px}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.watch{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.soc-link{display:inline-flex;gap:6px;align-items:center;border:2px solid var(--ink);background:#fff;padding:2px 8px;text-decoration:none;color:var(--ink)}
.soc-link img{width:16px;height:16px}
.body,.intro p,.note-card span span,.fine{font-family:"PingFang SC","Hiragino Sans GB",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.body{color:#2a2836}
.body p,.body li{font-size:18px;line-height:1.85;margin:0 0 16px}
.body ul,.body ol{padding-left:1.4em;margin:0 0 16px}.body li{margin:0 0 6px}
.body strong{font-weight:600;color:var(--ink)}
.body blockquote{font-size:17px;line-height:1.8;margin:18px 0;padding:10px 16px;border-left:4px solid var(--hl);background:#fff}
.body code{background:#fff;padding:0 4px;border:1px solid #c0cbdc}
.fine{color:var(--muted);font-size:14px}
.back{margin-top:36px}
footer{display:flex;gap:16px;justify-content:center;padding:24px;border-top:4px solid var(--ink);background:var(--paper)}
@media(max-width:600px){.nbar nav a:first-child{display:none}h1{font-size:24px;line-height:36px}.body p,.body li{font-size:17px}}