/* =====================================================
   Global Layout
===================================================== */

:root{
  --border: 3px;
  --radius: 14px;
  --accent: #b00000;

  /* 列宽控制（表头 & 内容统一） */
  --col-case: 70px;
  --col-input: 1.25fr;
  --col-stage1: 1.55fr;
  --col-vars: 1.05fr;
  --col-pred: 1.05fr;

  /* Case 行视觉高度 */
  --card-min-h: 420px;

  /* 视频最大高度 */
  --video-max-h: 260px;
}

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:#ffffff;
  color:#111;
}

.page{
  max-width:1200px;
  margin:40px auto 80px;
  padding:0 20px;
}

/* =====================================================
   Title / Section
===================================================== */

.title{
  text-align:center;
  font-size:46px;
  font-weight:900;
}

.subtitle{
  text-align:center;
  font-size:18px;
  margin-top:6px;
  color:#555;
  margin-bottom:40px;
}

.section-title{
  text-align:center;
  font-size:32px;
  font-weight:900;
  margin:50px 0 20px;
}

hr{
  margin:60px 0;
  border:none;
  border-top:1px solid #ddd;
}

/* =====================================================
   Model Image 控制（防止巨大）
===================================================== */

.model-img{
  margin:40px auto;
  max-width:1100px;
  text-align:center;
}

.model-img img{
  width:95%;
  max-height:650px;
  height:auto;
  object-fit:contain;
  border-radius:14px;
  border:1px solid #ddd;
}

/* =====================================================
   Demo Headers
===================================================== */

.col-headers{
  display:grid;
  grid-template-columns:
    var(--col-case)
    var(--col-input)
    var(--col-stage1)
    var(--col-vars)
    var(--col-pred);

  gap:20px;
  align-items:end;
  margin-bottom:12px;
}

.col-h{
  text-align:center;
  font-weight:900;
  font-size:18px;
  line-height:1.2;
}

/* =====================================================
   Case Row
===================================================== */

.case-row{
  display:grid;
  grid-template-columns:
    var(--col-case)
    var(--col-input)
    var(--col-stage1)
    var(--col-vars)
    var(--col-pred);

  gap:20px;
  margin-bottom:30px;
  align-items:stretch;
}

.case-label{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  border:var(--border) solid #000;
  border-radius:var(--radius);
  font-weight:900;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: var(--card-min-h);
}

.card{
  border:var(--border) solid #000;
  border-radius:var(--radius);
  padding:14px;
  min-height: var(--card-min-h);
  background:#fff;
  box-sizing:border-box;
}

/* =====================================================
   Multimodal Input（Video / Text / Audio）
===================================================== */

.mm-block{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.mm-label{
  font-weight:800;
  font-size:14px;
  margin:0;
}

.mm-video{
  width:100%;
  aspect-ratio:16 / 9;
  max-height: var(--video-max-h);
  border-radius:10px;
  object-fit:cover;
  background:#000;
}

.mm-text{
  font-size:14px;
  line-height:1.35;
}

.mm-audio{
  width:100%;
}

/* =====================================================
   Stage1 长文本滚动（关键）
===================================================== */

.stage1{
  font-size:14px;
  line-height:1.45;
  white-space:pre-wrap;
  max-height: calc(var(--card-min-h) - 10px);
  overflow:auto;
  padding-right:6px;
}

/* 滚动条美化 */
.stage1::-webkit-scrollbar{
  width:8px;
}
.stage1::-webkit-scrollbar-thumb{
  background:#cfcfcf;
  border-radius:8px;
}
.stage1::-webkit-scrollbar-track{
  background:transparent;
}

/* =====================================================
   Variables / Prediction
===================================================== */

.vars{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  gap:12px;
  font-weight:800;
}

.vars img{
  width:80%;
  max-width:260px;
  border:2px solid #000;
  border-radius:10px;
}

.pred{
  display:flex;
  flex-direction:column;
  justify-content:space-evenly; /* 关键：均匀分布 */
  align-items:flex-start;
  text-align:left;
  gap:0;
  font-weight:800;
  height:100%;      /* 让它占满 .card 的高度 */
}

/* 列表统一间距 */
.pred ul{
  list-style:none;
  padding:0;
  margin:0;
}

.pred li{
  margin:6px 0;
}

/* 我们模型只变红 */
.ours{
  color:var(--accent);
}

/* =====================================================
   分隔线
===================================================== */

.dash{
  border-top:2px dashed #666;
  margin:18px 0 28px;
}

/* =====================================================
   Responsive
===================================================== */

@media(max-width:1000px){

  .case-row,
  .col-headers{
    grid-template-columns:1fr;
  }

  .case-label{
    writing-mode:horizontal-tb;
    transform:none;
    min-height:auto;
  }

  .card{
    min-height:auto;
  }

  .stage1{
    max-height:none;
    overflow:visible;
  }
}