@charset "UTF-8";
/** Reset some basic elements */
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; }

/** Basic styling */
body { font: 400 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color: #111; background-color: #fdfdfd; -webkit-text-size-adjust: 100%; -webkit-font-feature-settings: "kern" 1; -moz-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1; font-kerning: normal; display: flex; min-height: 100vh; flex-direction: column; }

/** Set `margin-bottom` to maintain vertical rhythm */
h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, .highlight { margin-bottom: 15px; }

/** `main` element */
main { display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */ }

/** Images */
img { max-width: 100%; vertical-align: middle; }

/** Figures */
figure > img { display: block; }

figcaption { font-size: 14px; }

/** Lists */
ul, ol { margin-left: 30px; }

li > ul, li > ol { margin-bottom: 0; }

/** Headings */
h1, h2, h3, h4, h5, h6 { font-weight: 400; }

/** Links */
a { color: #2a7ae2; text-decoration: none; }
a:visited { color: #1756a9; }
a:hover { color: #111; text-decoration: underline; }
.social-media-list a:hover { text-decoration: none; }
.social-media-list a:hover .username { text-decoration: underline; }

/** Blockquotes */
blockquote { color: #828282; border-left: 4px solid #e8e8e8; padding-left: 15px; font-size: 18px; letter-spacing: -1px; font-style: italic; }
blockquote > :last-child { margin-bottom: 0; }

/** Code formatting */
pre, code { font-size: 15px; border: 1px solid #e8e8e8; border-radius: 3px; background-color: #eef; }

code { padding: 1px 5px; }

pre { padding: 8px 12px; overflow-x: auto; }
pre > code { border: 0; padding-right: 0; padding-left: 0; }

/** Wrapper */
.wrapper { max-width: -webkit-calc(800px - (30px * 2)); max-width: calc(800px - (30px * 2)); margin-right: auto; margin-left: auto; padding-right: 30px; padding-left: 30px; }
@media screen and (max-width: 800px) { .wrapper { max-width: -webkit-calc(800px - (30px)); max-width: calc(800px - (30px)); padding-right: 15px; padding-left: 15px; } }

/** Clearfix */
.wrapper:after, .footer-col-wrapper:after { content: ""; display: table; clear: both; }

/** Icons */
.svg-icon { width: 16px; height: 16px; display: inline-block; fill: #828282; padding-right: 5px; vertical-align: text-top; }

.social-media-list li + li { padding-top: 5px; }

/** Tables */
table { margin-bottom: 30px; width: 100%; text-align: left; color: #3f3f3f; border-collapse: collapse; border: 1px solid #e8e8e8; }
table tr:nth-child(even) { background-color: #f7f7f7; }
table th, table td { padding: 10px 15px; }
table th { background-color: #f0f0f0; border: 1px solid #dedede; border-bottom-color: #c9c9c9; }
table td { border: 1px solid #e8e8e8; }

/** Site header */
.site-header { border-top: 5px solid #424242; border-bottom: 1px solid #e8e8e8; min-height: 55.95px; position: relative; }

.site-title { font-size: 26px; font-weight: 300; line-height: 54px; letter-spacing: -1px; margin-bottom: 0; float: left; }
.site-title, .site-title:visited { color: #424242; }

.site-nav { float: right; line-height: 54px; }
.site-nav .nav-trigger { display: none; }
.site-nav .menu-icon { display: none; }
.site-nav .page-link { color: #111; line-height: 1.5; }
.site-nav .page-link:not(:last-child) { margin-right: 20px; }
@media screen and (max-width: 600px) { .site-nav { position: absolute; top: 9px; right: 15px; background-color: #fdfdfd; border: 1px solid #e8e8e8; border-radius: 5px; text-align: right; }
  .site-nav label[for="nav-trigger"] { display: block; float: right; width: 36px; height: 36px; z-index: 2; cursor: pointer; }
  .site-nav .menu-icon { display: block; float: right; width: 36px; height: 26px; line-height: 0; padding-top: 10px; text-align: center; }
  .site-nav .menu-icon > svg { fill: #424242; }
  .site-nav input ~ .trigger { clear: both; display: none; }
  .site-nav input:checked ~ .trigger { display: block; padding-bottom: 5px; }
  .site-nav .page-link { display: block; padding: 5px 10px; margin-left: 20px; }
  .site-nav .page-link:not(:last-child) { margin-right: 0; } }

/** Site footer */
.site-footer { border-top: 1px solid #e8e8e8; padding: 30px 0; }

.footer-heading { font-size: 18px; margin-bottom: 15px; }

.contact-list, .social-media-list { list-style: none; margin-left: 0; }

.footer-col-wrapper { font-size: 15px; color: #828282; margin-left: -15px; }

.footer-col { float: left; margin-bottom: 15px; padding-left: 15px; }

.footer-col-1 { width: -webkit-calc(35% - (30px / 2)); width: calc(35% - (30px / 2)); }

.footer-col-2 { width: -webkit-calc(20% - (30px / 2)); width: calc(20% - (30px / 2)); }

.footer-col-3 { width: -webkit-calc(45% - (30px / 2)); width: calc(45% - (30px / 2)); }

@media screen and (max-width: 800px) { .footer-col-1, .footer-col-2 { width: -webkit-calc(50% - (30px / 2)); width: calc(50% - (30px / 2)); }
  .footer-col-3 { width: -webkit-calc(100% - (30px / 2)); width: calc(100% - (30px / 2)); } }
@media screen and (max-width: 600px) { .footer-col { float: none; width: -webkit-calc(100% - (30px / 2)); width: calc(100% - (30px / 2)); } }
/** Page content */
.page-content { padding: 30px 0; flex: 1; }

.page-heading { font-size: 32px; }

.post-list-heading { font-size: 28px; }

.post-list { margin-left: 0; list-style: none; }
.post-list > li { margin-bottom: 30px; }

.post-meta { font-size: 14px; color: #828282; }

.post-link { display: block; font-size: 24px; }

/** Posts */
.post-header { margin-bottom: 30px; }

.post-title { font-size: 42px; letter-spacing: -1px; line-height: 1; }
@media screen and (max-width: 800px) { .post-title { font-size: 36px; } }

.post-content { margin-bottom: 30px; }
.post-content h2 { font-size: 32px; }
@media screen and (max-width: 800px) { .post-content h2 { font-size: 28px; } }
.post-content h3 { font-size: 26px; }
@media screen and (max-width: 800px) { .post-content h3 { font-size: 22px; } }
.post-content h4 { font-size: 20px; }
@media screen and (max-width: 800px) { .post-content h4 { font-size: 18px; } }

/** Syntax highlighting styles */
.highlight { background: #fff; }
.highlighter-rouge .highlight { background: #eef; }
.highlight .c { color: #998; font-style: italic; }
.highlight .err { color: #a61717; background-color: #e3d2d2; }
.highlight .k { font-weight: bold; }
.highlight .o { font-weight: bold; }
.highlight .cm { color: #998; font-style: italic; }
.highlight .cp { color: #999; font-weight: bold; }
.highlight .c1 { color: #998; font-style: italic; }
.highlight .cs { color: #999; font-weight: bold; font-style: italic; }
.highlight .gd { color: #000; background-color: #fdd; }
.highlight .gd .x { color: #000; background-color: #faa; }
.highlight .ge { font-style: italic; }
.highlight .gr { color: #a00; }
.highlight .gh { color: #999; }
.highlight .gi { color: #000; background-color: #dfd; }
.highlight .gi .x { color: #000; background-color: #afa; }
.highlight .go { color: #888; }
.highlight .gp { color: #555; }
.highlight .gs { font-weight: bold; }
.highlight .gu { color: #aaa; }
.highlight .gt { color: #a00; }
.highlight .kc { font-weight: bold; }
.highlight .kd { font-weight: bold; }
.highlight .kp { font-weight: bold; }
.highlight .kr { font-weight: bold; }
.highlight .kt { color: #458; font-weight: bold; }
.highlight .m { color: #099; }
.highlight .s { color: #d14; }
.highlight .na { color: #008080; }
.highlight .nb { color: #0086B3; }
.highlight .nc { color: #458; font-weight: bold; }
.highlight .no { color: #008080; }
.highlight .ni { color: #800080; }
.highlight .ne { color: #900; font-weight: bold; }
.highlight .nf { color: #900; font-weight: bold; }
.highlight .nn { color: #555; }
.highlight .nt { color: #000080; }
.highlight .nv { color: #008080; }
.highlight .ow { font-weight: bold; }
.highlight .w { color: #bbb; }
.highlight .mf { color: #099; }
.highlight .mh { color: #099; }
.highlight .mi { color: #099; }
.highlight .mo { color: #099; }
.highlight .sb { color: #d14; }
.highlight .sc { color: #d14; }
.highlight .sd { color: #d14; }
.highlight .s2 { color: #d14; }
.highlight .se { color: #d14; }
.highlight .sh { color: #d14; }
.highlight .si { color: #d14; }
.highlight .sx { color: #d14; }
.highlight .sr { color: #009926; }
.highlight .s1 { color: #d14; }
.highlight .ss { color: #990073; }
.highlight .bp { color: #999; }
.highlight .vc { color: #008080; }
.highlight .vg { color: #008080; }
.highlight .vi { color: #008080; }
.highlight .il { color: #099; }

/* --- 1. 全局布局锁定 --- */
* { box-sizing: border-box !important; }

body { background-color: #ffdae9 !important; background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%), linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.4) 75%), linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.4) 75%); background-size: 10px 10px; background-attachment: fixed; color: #ff4d94 !important; }

/* --- 2. 核心容器：缩窄变圆润 --- */
.wrapper { background: rgba(255, 255, 255, 0.95) !important; /* 稍微调高一点点不透明度，显得更干净 */ border: 2px dashed #ff85b9 !important; /* 从笨重的 4px double 改为细虚线 */ border-radius: 20px !important; /* 增加大圆角，手帐感拉满 */ max-width: 800px !important; /* 核心：从 1000px 缩窄，聚拢视线 */ margin: 30px auto !important; padding: 25px 40px 35px 40px !important; /* 将第一个数值从 15px 调回 25px */ box-shadow: 0 10px 30px rgba(255, 77, 148, 0.1); /* 增加一层极其柔和的粉色弥散光影 */ }

/* --- 3. 导航栏 --- */
.site-header { border-bottom: 2px dashed #ff85b9 !important; background: rgba(255, 255, 255, 0.9) !important; min-height: 80px; display: flex; align-items: center; box-shadow: 0 4px 15px rgba(255, 77, 148, 0.05); /* 导航栏底部加一点点微弱的阴影 */ }

.site-header .wrapper { display: flex; justify-content: space-between; align-items: center; border: none !important; background: transparent !important; margin: 0 auto !important; padding: 0 20px !important; width: 100%; max-width: 850px !important; /* 配合主容器，从 1100px 缩窄 */ box-shadow: none !important; /* 清除导航栏内部 wrapper 的阴影 */ }

.site-title, .site-title:visited { color: #ff4d94 !important; text-decoration: none !important; font-size: 20px !important; font-weight: bold; white-space: nowrap; flex-shrink: 0; border-bottom: 2px dashed #ff85b9 !important; padding-bottom: 3px; }

.site-nav { flex-grow: 1; display: flex; justify-content: flex-end; margin-left: 20px; }

.site-nav .trigger { display: flex !important; flex-direction: row; align-items: center; gap: 12px; }

.site-nav .page-link { color: #ff4d94 !important; text-decoration: none !important; border-bottom: 2px dashed #ff85b9 !important; font-size: 13.5px !important; font-weight: bold; white-space: nowrap; padding-bottom: 2px; }

.site-nav .page-link:hover, .site-title:hover { border-bottom: 2px solid #ff4d94 !important; color: #ff1493 !important; }

/* --- 4. 状态模块：增加圆角连贯性 --- */
.status-module { width: 100%; background: rgba(255, 192, 203, 0.2) !important; border: 2px dashed #ff85b9 !important; /* 稍微改细 */ border-radius: 16px; /* 增加圆角 */ padding: 30px; margin-bottom: 40px; display: flex; flex-direction: column; gap: 20px; }

.status-header { margin-bottom: -5px; }

.status-prefix { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: #ff4d94; font-weight: bold; opacity: 0.8; }

.input-group { display: flex; gap: 0; width: 100%; /* 替换硬阴影为柔和阴影 */ box-shadow: 0 6px 15px rgba(255, 77, 148, 0.15); border-radius: 8px; /* 给整个输入框组加圆角 */ }

#status-input { flex: 1; background: #fff !important; border: 2px solid #ff4d94; border-right: none; border-radius: 8px 0 0 8px; /* 左侧圆角 */ color: #ff4d94; padding: 12px 15px; font-style: italic; font-family: "Courier New", monospace; outline: none; }

.pixel-save-btn { background: #00008B !important; color: #fff !important; border: 2px solid #ff4d94; border-radius: 0 8px 8px 0; /* 右侧圆角 */ padding: 0 30px; height: 48px; font-weight: bold; font-size: 14px; cursor: pointer; transition: all 0.2s; }

.pixel-save-btn:hover { background: #ff4d94 !important; }

.locked-status { display: flex; justify-content: space-between; align-items: center; border-left: 5px solid #ff4d94; border-radius: 10px; /* 增加圆角 */ background: rgba(255, 255, 255, 0.8); margin-bottom: 10px; padding: 15px 20px; color: #ff4d94; font-size: 14px; width: 100%; }

.locked-status span:first-child { flex: 1; padding-right: 20px; }

/* --- 5. 电脑屏与播放器：软化边框 --- */
.computer-group-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-bottom: 40px; }

.btn-screen { height: 200px; background: #000 !important; border: 4px solid #00008B; /* 从 6px 稍微改细 */ border-radius: 16px; /* 增加圆角，像老式胖头电视机，更复古可爱 */ position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden; /* 防止内部溢出圆角 */ }

.soundcloud-wrapper { border: 4px solid #00008B; /* 从 6px 稍微改细 */ background: #000; border-radius: 16px; /* 增加圆角 */ overflow: hidden; box-shadow: 0 10px 25px rgba(0, 0, 139, 0.2); /* 把生硬的块状阴影改成柔和的深蓝色弥散阴影 */ }

.module-label-pink { background: #ff4d94; color: #fff; padding: 4px 12px; margin-top: 10px; display: inline-block; font-size: 11px; border-radius: 4px; /* 小标签也加上微小的圆角 */ }

@keyframes blink { 0% { opacity: 0.1; }
  100% { opacity: 0.8; } }
/* --- Matrix 日历特效 --- */
.matrix-cell { color: #00ff41; /* 黑客帝国经典荧光绿 */ font-family: "Courier New", Courier, monospace; font-size: 14px; text-align: center; opacity: 0; /* 初始隐藏，等待动画唤醒 */ /* 增加随机点亮动画，持续1.5秒，停留在半透明状态 */ animation: matrixFlicker 1.5s forwards; }

/* 当天日期：黑底绿字，强发光，加粗 */
.matrix-cell.is-today { color: #000 !important; background-color: #00ff41; font-weight: bold; border-radius: 3px; box-shadow: 0 0 10px #00ff41, 0 0 20px #00ff41; /* 荧光外发光 */ opacity: 1 !important; /* 当天日期永远保持最高亮度 */ animation: none; /* 取消当天的闪烁动画 */ }

/* 逐字点亮与呼吸微光动画 */
@keyframes matrixFlicker { 0% { opacity: 0; text-shadow: none; }
  20% { opacity: 1; text-shadow: 0 0 10px #00ff41; }
  40% { opacity: 0.2; text-shadow: none; }
  60% { opacity: 0.8; text-shadow: 0 0 5px #00ff41; }
  100% { opacity: 0.4; text-shadow: none; }
  /* 最终停留在一个较暗的背景状态，不抢主标题风头 */ }
/* --- 6. 页脚 (Footer) 链接颜色调整 --- */
.site-footer a, .site-footer a:visited { color: #888888 !important; /* 将默认的蓝色改为柔和的灰色 */ text-decoration: none !important; /* 去掉下划线，看起来更干净 */ transition: color 0.2s ease; /* 添加一个平滑的过渡效果 */ }

/* 鼠标悬停时的效果（可选）：为了保持互动感，悬停时可以让它微微发亮或变成主题粉色 */
.site-footer a:hover { color: #ff4d94 !important; /* 鼠标放上去时变成你的主题粉色，如果只想保持灰色，可以把这里也改成 #555555 */ }

/* --- 7. 阅读双轨制：长文护眼 vs 新闻剪报 --- */
/* [长文模式]：只有点进真正的日志文章，文字才会变大、变灰、变疏朗 */
article.post-content p, article.post-content li { font-size: 16px !important; color: #b53568 !important; /* 护眼深红豆沙色 */ line-height: 1.8 !important; letter-spacing: 0.5px; }

/* [新闻模式]：针对城市动态、漫游进程等卡片页面，强制回归微缩紧凑感 */
.creative-layout li, .creative-layout a, .creative-layout p { font-size: 12.5px !important; /* 还原你最喜欢的极小字号 */ font-weight: 400 !important; /* 彻底告别臃肿的粗体 */ line-height: 1.2 !important; /* 极窄行距 */ letter-spacing: -0.2px !important; color: #b53568 !important; }

/* 还原你喜欢的剪报虚线底色 */
.creative-layout a { text-decoration: none !important; border-bottom: 1px dashed rgba(181, 53, 104, 0.3) !important; }

/* --- 8. 标题抹除计划：微调高度 --- */
.page-heading, h1.page-title, header.post-header, header.post-header h1 { display: none !important; }

/* 移除之前的 :first-child 强制归零，或者将其改为一个温和的数值 */
.post-content { margin-top: 5px !important; /* 给 5px 的微小间隔 */ padding-top: 0 !important; }

/* --- 9. 卡片内部标题微调 (如：🚌 交通 & 罢工) --- */
.creative-layout h3 { font-size: 15px !important; margin-top: 0 !important; margin-bottom: 10px !important; color: #ff4d94 !important; display: block; }

/* --- 10. 生活图鉴专修：幸存者日志列表 --- */
.gallery-container h3 { font-size: 18px !important; margin-top: 0 !important; border-bottom: 2px solid rgba(255, 133, 185, 0.2); padding-bottom: 10px; }

.post-item .post-title { font-size: 18px !important; font-weight: 500 !important; color: #4a4a4a !important; /* 列表标题用深灰，更有层次感 */ }

/* --- 11. 导航链接 Q 弹反馈 --- */
.site-nav .page-link { display: inline-block; /* 必须设置为 inline-block 才能产生缩放动画 */ transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; }

/* 鼠标悬停：稍微放大并向上跳动 */
.site-nav .page-link:hover { transform: scale(1.15) translateY(-3px) !important; color: #ff1493 !important; /* 悬停时颜色稍微加深 */ }

/* 鼠标按下（点击瞬间）：像气球被捏住一样缩小，提供触觉反馈 */
.site-nav .page-link:active { transform: scale(0.9) translateY(0) !important; transition: transform 0.1s !important; /* 按下时反馈要快 */ }

/* --- 悬停时的“小星光”爆破特效 --- */
.site-nav .page-link { position: relative; }

.site-nav .page-link:hover::before, .site-nav .page-link:hover::after { content: "✨"; /* 可以换成 "🌸" 或 "●" */ position: absolute; font-size: 10px; top: 50%; left: 50%; opacity: 0; pointer-events: none; animation: sparkle-burst 0.6s ease-out forwards; }

.site-nav .page-link:hover::after { content: "✦"; animation-delay: 0.1s; }

@keyframes sparkle-burst { 0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  100% { /* 向四个方向随机散开 */
transform: translate(-150%, -150%) scale(1.5) rotate(45deg); opacity: 0; } }
/* --- 页脚排版终极校准 --- */
/* 1. 重新分配三列宽度，确保中间列有足够空间容纳 6 个汉字 */
.footer-col-wrapper { display: flex !important; justify-content: space-between !important; flex-wrap: nowrap !important; }

.footer-col-1 { width: 25% !important; min-width: 150px !important; }

.footer-col-2 { width: 35% !important; /* 增加宽度，防止“志”字掉下去 */ padding-left: 20px !important; }

.footer-col-3 { width: 40% !important; }

/* 2. 强制社交链接不换行，且垂直居中 */
.social-media-list li a { display: flex !important; align-items: center !important; white-space: nowrap !important; /* 核心：禁止文字为了凑空间而断开 */ }

/* 3. 彻底锁死底部语言切换，不准它缩成两行 */
.language-switch a { display: inline-block !important; white-space: nowrap !important; }

/* ========================================================================== 移动端 APP 化视觉补丁 (Y2K 赛博风格) ========================================================================== */
@media screen and (max-width: 768px) { /* 1. 全局背景切换：深邃赛博感 */
  body { background-color: #050505 !important; background-image: radial-gradient(circle at top right, rgba(255, 133, 185, 0.1), transparent) !important; color: #ffffff !important; padding-bottom: 90px !important; /* 给底部导航留出足够空间 */ }
  /* 2. 隐藏原有的博客页头和电脑端页脚内容，让位给 App 布局 */
  .site-header, .site-footer .wrapper { display: none !important; }
  /* 3. 底部导航栏样式：毛玻璃 + 霓虹边框 */
  .mobile-bottom-nav { display: flex !important; position: fixed; bottom: 0; left: 0; right: 0; height: 75px; background: rgba(15, 15, 15, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 2px solid #ff85b9; z-index: 1000; justify-content: space-around; align-items: center; padding-bottom: env(safe-area-inset-bottom); }
  /* Emoji 与文字的排版 */
  .nav-item { display: flex; flex-direction: column; align-items: center; color: #ffffff !important; text-decoration: none !important; font-size: 10px; font-weight: 600; flex: 1; }
  .nav-emoji { font-size: 20px; margin-bottom: 4px; transition: transform 0.2s; }
  /* 点击 Emoji 时的 App 反馈感 */
  .nav-item:active .nav-emoji { transform: scale(1.2); }
  /* 4. 文章列表适配：硬核卡片化 */
  .post-list-heading { color: #ff85b9 !important; font-size: 1.2rem !important; margin-left: 15px; }
  .post-list li { margin: 15px !important; list-style: none !important; }
  .post-link { display: block !important; background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 133, 185, 0.2) !important; padding: 20px !important; border-radius: 15px !important; color: #fff !important; text-decoration: none !important; box-shadow: 4px 4px 0px rgba(255, 133, 185, 0.1); }
  .post-meta { color: #ff85b9 !important; font-family: monospace; font-size: 12px; } }
/* 电脑端彻底隐藏底部 App 导航 */
@media screen and (min-width: 769px) { .mobile-bottom-nav { display: none !important; } }