:root{
  /* ONE official color scheme */
  --brand:#01aef0;
  --text:#333;
  --muted:#999;
  --bg:#fff;
  --line:#e5e5e5;
  --dark:#333;
  --panel:#f6f6f6;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Open Sans","Helvetica Neue",Helvetica,"BBAlpha Sans","S60 Sans",Arial,"Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
  font-size:12px;
  line-height:1.75;
}
a{color:#1677ff; text-decoration:none}
a:hover{text-decoration:underline}
/* Pointer cursor on interactive elements (glove removed) */
a, button, .arrow, .dot, .clickable{ cursor: pointer; }

.container{width:min(864px,92vw); margin:0 auto}
.topbar{max-width:864px;background:#01aef0; color:#fff; height:50px; margin:10px auto; display:flex; align-items:center; justify-content:center}
.topbar .brand{
  height:50px; display:flex; align-items:center;
   justify-content:center; font-weight:400; 
   letter-spacing:0; font-size:24px; color:#fff
}

.grid{display:grid; grid-template-columns: 2fr 1fr; gap:10px; align-items:start}
@media (max-width: 960px){ .grid{grid-template-columns:1fr; gap:20px} }

/* slider - ONE official style */
.slider{position:relative; border:none; background:transparent; margin-bottom:10px}
.slider-viewport{position:relative; width:100%; aspect-ratio: 16/9; overflow:hidden}
.slide{position:absolute; inset:0; opacity:0; transition:opacity .45s ease-in-out}
.slide.active{opacity:1}
.slide img{width:100%; height:100%; object-fit:cover; display:block}
.captionbar{position:absolute; left:0; right:0; bottom:0; background:#333; color:#fff; padding:3px 0; font-size:12px; text-align:center}
.infobar{display:flex; background:#d6d6d6; color:var(--text); height:120px; position:relative}
.infobar .quote{flex:1; font-size:14px; line-height:1.67; color:#000; padding:10px 5%; display:flex; align-items:center}
.infobar .vol{background:#f2f2f2; color:#333; width:100px; height:120px; padding:12.5px; text-align:center; display:flex; flex-direction:column; justify-content:center; flex-shrink:0}
.infobar .vol .v1{font-size:12px; margin:0 0 5px 0}
.infobar .vol .v2{font-size:56px; font-weight:600; height:56px; line-height:56px; margin:0}
.infobar .vol .v3{font-size:12px; margin:0}

.arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:50%; border:none; background: rgba(0,0,0,.35); color:#fff;
  font-size:20px; display:flex; align-items:center; justify-content:center; transition:background .2s ease;
}
.arrow:hover{background: rgba(0,0,0,.55)}
.arrow.left{left:10px}
.arrow.right{right:10px}
.dots{display:flex; gap:5px; justify-content:center; align-items:center; padding:3px 0; background:#333; margin:0; width:100%}
.dot{width:8px; height:8px; border-radius:50%; background:#bdbdbd; margin:1px 5px}
.dot.active{background:#fff}

/* right sidebar lists - ONE official style (updated to match screenshot) */
.box{
  background:#efefef;
  margin-bottom:10px;
  border:1px solid #e5e5e5;
  overflow: hidden;
  width: 280px;


}
.box .head{
  background:#01aef0; color:#fff;
  font-size:18px; font-weight:400;
  line-height:44px; height:44px;
  margin:0 0 10px 0; padding:0 12px;
}
.box .body{padding:0 12px 10px 12px}

.list{display:block}

/* 每一条列表行 */
.item{
  border-bottom:1px solid #e5e5e5;
}
.item:last-child{border-bottom:none}

/* 期号：普通行与标题同一行；当前行独立一行 */
.item .meta{
  display:inline-block;
  color:#9aa0a6;
  font-size:14px;
  margin-right:8px;
  vertical-align:baseline;
}
.item.current .meta{
  display:block;
  margin:6px 0 6px 0;
}

/* 标题：普通行灰色14px；当前行蓝色18px加粗 */
.item .title{
  display:inline;                    /* 与 meta 同行 */
  font-size:14px;
  font-weight:400;
  color:#666;
  line-height:1.6;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap; /* 单行省略号 */
}
.item .title a{ color:inherit; text-decoration:none;white-space: nowrap;text-overflow: ellipsis; overflow: hidden; }
.item .title a:hover{ color:#1a73e8; text-decoration:underline; }

.item.current .title{
  display:block;                     /* 与 meta 分行 */
  font-size:18px;
  font-weight:600;
  line-height:1.6;
  color:#1a73e8;                     /* 当前项蓝色标题 */
  white-space:normal;                /* 允许换行 */
}

/* 作者小字 */
.item .title small{font-size:12px; color:#9aa0a6; font-weight:400}
.item .sub{color:#9aa0a6; font-size:12px}

/* section: app promo - ONE official style */
.app{ text-align:center; padding:20px 0 10px; color:#000; margin:20px auto; max-width:320px }
.app h3{ font-weight:400; font-size:18px; line-height:32px; margin:0 0 10px 0; padding:5px 10px; color:#000 }
.app p{ color:#333; font-size:12px; line-height:2; margin:5px 0 }

/* detail pages */
.detail{display:grid; grid-template-columns: 2fr 1fr; gap:20px}
@media (max-width: 960px){ .detail{grid-template-columns:1fr} }
.post{border:1px solid var(--line); padding:20px}
.post h1{margin:0 0 10px; font-size:26px}
.meta{color:#888; font-size:12px; line-height: 26px; }
.post p{margin:12px 0}
.sidebar .card{border:1px solid var(--line); margin-bottom:16px; background:#f7f7f7}
.sidebar .card .head{background:var(--brand); color:#fff; padding:8px 12px; font-weight:700}
.sidebar .card .body{padding:12px}

/* footer */
.footer{padding:26px 0; color:#777; font-size:12px; border-top:1px solid var(--line); margin-top:28px}

/* --- Article single-column page --- */
.article-page{max-width:820px;margin:0 auto;padding:0 0 40px;}
.article-page h1{font-size:32px;font-weight:700;margin:0 0 8px;}
.article-page .article-meta{color:#888;font-size:13px;margin:6px 0 18px;}
.article-cover{margin:10px 0 16px;}
.article-cover img{width:100%;height:auto;display:block;}
.article-content{font-family:ui-serif,"Noto Serif SC","Source Han Serif SC","Songti SC",Georgia,serif;font-size:16px;line-height:2;color:#222;}
.article-content p{margin:0 0 16px;text-indent:2em;}

/* === Sidebar compact tweaks (apply to BOTH "ONE 文章" & "ONE 问题") === */
/* 1) 容器内边距更紧凑 */
.box .body{
}

/* 2) 普通条目更小、更紧，且去掉分割线 */
.list .item{
  white-space: nowrap;
  border-bottom: none;  
display: flex;  
align-items: center;      /* 去掉分割线（虚线/实线都覆盖掉） */
}
/* 条目之间给一点自然间距（代替分割线） */


/* 3) 普通条目字号与颜色（更小更浅） */
.list .item:not(.current) .meta{
  font-size: 13px;             /* VOL 字号 */
  color: #9aa0a6;
  margin-right: 10px;
}
.list .item:not(.current) .title{
  font-size: 13px;             /* 标题字号 */
  color: #666;
  line-height: 1.4;            /* 更紧凑 */
  white-space: nowrap;         /* 单行显示 */
  overflow: hidden;
  text-overflow: ellipsis;     /* 超长省略号 */
}

/* 4) 当前条目（保留你的大标题样式），稍微压缩上下空白 */
.list .item.current{
  margin-bottom: 10px;

}
.list .item.current .meta{
  display: block;              /* 第一行单独显示 VOL */
}
.list .item.current .title{
  font-size: 18px;             /* 保持大一号的蓝色标题 */
  font-weight: 600;
  color: #1a73e8;
  white-space: normal;         /* 允许换行 */
}

/* === Sidebar compact overrides (smaller & tighter, no divider lines) === */
/* 容器更紧凑一点 */
.box .body{
}

/* 每条为一组：去掉分割线，改成"自然间距" */


/* 普通行（非 current）：更小、更紧 */
.list .item:not(.current) .meta{
  font-size: 12px;         /* VOL 字号 */
  color: #9aa0a6;
  margin-right: 10px;      /* VOL 和标题之间的间距10px */
}
.list .item:not(.current) .title{
  white-space: nowrap;
  font-size: 12px;         /* 标题字号 */
  color: #666;
  line-height: 1.2;        /* 行高更紧；若想极致紧凑可试 1.0（不建议低到 0.5，会显得拥挤） */
  white-space: nowrap;     /* 一行显示 */
  overflow: hidden;
  text-overflow: ellipsis; /* 超长省略号 */
}

/* 当前行（蓝色大标题）保持突出，但略压缩上下空白 */

.list .item.current,.list .item.current .meta{
  display: block;          /* VOL 单独一行 */
}
.list .item.current .title{
  font-size: 16px;         /* 字体大小16px */
  font-weight: 400;        /* 不加粗 */
  color: #1a73e8;
  white-space: normal;     /* 允许换行 */
}

/* ===== 响应式移动端样式 ===== */

/* 平板样式 (768px - 1024px) */
@media (max-width: 1024px) {
  .container {
    width: min(90vw, 800px);
    padding: 0 15px;
  }
  
  .topbar {
    max-width: 100%;
    margin: 5px 0;
    height: 45px;
  }
  
  .topbar .brand {
    font-size: 20px;
  }
  
  .grid {
    gap: 15px;
  }
  
  .box {
    width: 100%;
    max-width: 100%;
  }
  
  .infobar {
    height: 100px;
  }
  
  .infobar .vol {
    width: 80px;
    height: 100px;
  }
  
  .infobar .vol .v2 {
    font-size: 48px;
    height: 48px;
    line-height: 48px;
  }
}

/* 手机样式 (最大768px) */
@media (max-width: 768px) {
  body {
    font-size: 12px;
  }
  
  .container {
    width: 100%;
    padding: 0 15px;
  }
  
  /* 顶部导航栏 - 保持PC比例 */
  .topbar {
    height: 50px;
    margin: 10px 0;
  }
  
  .topbar .brand {
    font-size: 20px;
  }
  
  /* 主布局 - 单列，移动端紧凑间距 */
  .grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  /* 轮播图区域 - 保持PC比例 */
  .slider-viewport {
    aspect-ratio: 16/9;
  }
  
  .arrow {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }
  
  .arrow.left {
    left: 10px;
  }
  
  .arrow.right {
    right: 10px;
  }
  
  /* 信息栏 - 保持PC布局和比例 */
  .infobar {
    height: 120px;
    flex-direction: row;
  }
  
  .infobar .quote {
    font-size: 14px;
    padding: 10px 5%;
    flex: 1;
  }
  
  .infobar .vol {
    width: 100px;
    height: 120px;
    padding: 12.5px;
    flex-shrink: 0;
  }
  
  .infobar .vol .v1 {
    font-size: 12px;
    margin: 0 0 5px 0;
  }
  
  .infobar .vol .v2 {
    font-size: 56px;
    height: 56px;
    line-height: 56px;
    margin: 0;
  }
  
  .infobar .vol .v3 {
    font-size: 12px;
    margin: 0;
  }
  
  /* 侧栏 - 移动端超紧凑样式 */
  .box {
    width: 100%;
    margin-bottom: 6px;
    border: 1px solid #e5e5e5;
    overflow: hidden;
  }
  
  .box .head {
    background: #01aef0;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
    height: 30px;
    margin: 0 0 6px 0;
    padding: 0 8px;
  }
  
  .box .body {
    padding: 0 8px 6px 8px;
  }
  
  /* 列表项 - 移动端超紧凑样式 */
  .list .item {
    padding: 4px 0;
    border-bottom: none;
    display: flex;
    align-items: center;
  }
  
  .list .item + .item {
    margin-top: 4px;
  }
  
  .list .item:not(.current) .meta {
    font-size: 12px;
    color: #9aa0a6;
    margin-right: 10px;
  }
  
  .list .item:not(.current) .title {
    font-size: 12px;
    color: #666;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .list .item.current .title {
    font-size: 16px;
    font-weight: 400;
    color: #1a73e8;
    white-space: normal;
  }
  
  .list .item.current .meta {
    display: block;
    margin: 0 0 10px 0;
  }
  
  /* 应用推广区域 - 保持PC样式 */
  .app {
    text-align: center;
    padding: 20px 0 10px;
    color: #000;
    margin: 20px auto;
    max-width: 320px;
  }
  
  .app h3 {
    font-weight: 400;
    font-size: 18px;
    line-height: 32px;
    margin: 0 0 10px 0;
    padding: 5px 10px;
    color: #000;
  }
  
  .app p {
    color: #333;
    font-size: 12px;
    line-height: 2;
    margin: 5px 0;
  }
  
  /* 文章页面 - 保持PC样式 */
  .article-page {
    max-width: 100%;
    padding: 0 0 40px;
  }
  
  .article-page h1 {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 8px;
  }
  
  .article-page .article-meta {
    color: #888;
    font-size: 13px;
    margin: 6px 0 18px;
  }
  
  .article-content {
    font-family: ui-serif, "Noto Serif SC", "Source Han Serif SC", "Songti SC", Georgia, serif;
    font-size: 16px;
    line-height: 2;
    color: #222;
  }
  
  .article-content p {
    margin: 0 0 16px;
    text-indent: 2em;
  }
}

/* 小屏手机样式 (最大480px) - 保持PC比例但适度缩小 */
@media (max-width: 480px) {
  body {
    font-size: 11px;
  }
  
  .container {
    padding: 0 10px;
  }
  
  /* 顶部导航栏 - 保持PC比例但缩小 */
  .topbar {
    height: 45px;
    margin: 8px 0;
  }
  
  .topbar .brand {
    font-size: 18px;
  }
  
  /* 主布局 - 小屏手机紧凑间距 */
  .grid {
    gap: 12px;
  }
  
  /* 轮播图 - 保持16:9比例 */
  .slider-viewport {
    aspect-ratio: 16/9;
  }
  
  .arrow {
    width: 32px;
    height: 32px;
    font-size: 18px;
  }
  
  .arrow.left {
    left: 8px;
  }
  
  .arrow.right {
    right: 8px;
  }
  
  /* 信息栏 - 保持PC布局但缩小 */
  .infobar {
    height: 100px;
  }
  
  .infobar .quote {
    font-size: 12px;
    padding: 8px 4%;
  }
  
  .infobar .vol {
    width: 80px;
    height: 100px;
    padding: 10px;
  }
  
  .infobar .vol .v1 {
    font-size: 10px;
    margin: 0 0 4px 0;
  }
  
  .infobar .vol .v2 {
    font-size: 40px;
    height: 40px;
    line-height: 40px;
    margin: 0;
  }
  
  .infobar .vol .v3 {
    font-size: 10px;
    margin: 0;
  }
  
  /* 侧栏 - 小屏手机超紧凑样式 */
  .box {
    margin-bottom: 4px;
  }
  
  .box .head {
    font-size: 12px;
    height: 26px;
    line-height: 26px;
    padding: 0 6px;
    margin: 0 0 4px 0;
  }
  
  .box .body {
    padding: 0 6px 4px 6px;
  }
  
  /* 列表项 - 小屏手机超紧凑样式 */
  .list .item {
    padding: 3px 0;
  }
  
  .list .item + .item {
    margin-top: 3px;
  }
  
  .list .item:not(.current) .meta {
    font-size: 11px;
    margin-right: 8px;
  }
  
  .list .item:not(.current) .title {
    font-size: 11px;
  }
  
  .list .item.current .title {
    font-size: 14px;
  }
  
  .list .item.current .meta {
    margin: 0 0 8px 0;
  }
  
  /* 应用推广区域 - 保持PC样式但缩小 */
  .app {
    padding: 15px 0 8px;
    margin: 15px auto;
  }
  
  .app h3 {
    font-size: 16px;
    line-height: 28px;
    padding: 4px 8px;
  }
  
  .app p {
    font-size: 11px;
    line-height: 1.8;
  }
  
  /* 文章页面 - 保持PC样式但缩小 */
  .article-page h1 {
    font-size: 28px;
    margin: 0 0 6px;
  }
  
  .article-page .article-meta {
    font-size: 12px;
    margin: 4px 0 15px;
  }
  
  .article-content {
    font-size: 15px;
    line-height: 1.9;
  }
  
  .article-content p {
    margin: 0 0 14px;
    text-indent: 1.8em;
  }
}