/* =====================================================
   Generated replica of https://helena2026.figma.site
   + Chapter 4 文档流布局（支持词云推挤下方内容）
   ===================================================== */

   * { box-sizing: border-box; margin: 0; padding: 0; }

   html, body {
     background: rgb(251,242,219);
     font-family: "Inter", "Noto Sans SC", "Noto Sans JP", system-ui, sans-serif;
     color: rgb(0, 0, 0);
     overflow-x: auto;
   }
   
   body {
     display: flex;
     justify-content: center;
     min-width: 1440px;
   }
   
   .page {
     width: 1440px;
     min-height: 100vh;
     background: rgb(251,242,219);
     position: relative;
   }
   
   /* =====================================================
      导航
      ===================================================== */
   .nav {
     height: 100px;
     display: flex;
     align-items: center;
     justify-content: flex-end;
     gap: 100px;
     padding: 0 96px;
   }
   
   .nav-link {
     font-family: 'Abril Fatface', 'Noto Sans SC', 'Noto Sans JP', system-ui, sans-serif;
     font-size: 24px;
     font-weight: 400;
     text-decoration: none;
     color: rgb(172, 143, 106);
     transition: color .2s ease;
     cursor: pointer;
   }
   
   .nav-link:hover { color: rgb(140, 110, 70); }
   .nav-link.active { color: rgb(91, 59, 18); cursor: default; }
   
   /* =====================================================
      Hero
      ===================================================== */
   .hero {
     height: 660px;
     background-image: url(assets/1e5dc96101fe7bb5e4c5ee6201da7049a5a1e407.png);
     background-size: cover;
     background-position: 0% 61.3%;
     background-repeat: no-repeat;
     position: relative;
   }
   
   .hero-inner {
     position: absolute;
     left: 132px;
     top: 196px;
   }
   
   .hero-title {
     font-family: 'Abhaya Libre ExtraBold', 'Noto Sans SC', 'Noto Sans JP', system-ui, sans-serif;
     font-size: 50px;
     font-weight: 400;
     line-height: 1.15;
     color: rgb(251, 242, 219);
     margin: 0;
   }
   
   .hero-sub {
     font-family: 'Abhaya Libre ExtraBold', 'Noto Sans SC', 'Noto Sans JP', system-ui, sans-serif;
     font-size: 30px;
     font-weight: 400;
     line-height: 1.25;
     color: rgb(251, 242, 219);
     max-width: 576px;
     margin-top: 92px;
   }
   
   /* =====================================================
      介绍
      ===================================================== */
   .intro {
     padding: 70px 132px 65px;
     font-family: 'Inter', 'Noto Sans SC', 'Noto Sans JP', system-ui, sans-serif;
     font-size: 20px;
     font-weight: 300;
     line-height: 1.55;
     color: rgb(0, 0, 0);
     text-align: justify;
   }
   
   /* =====================================================
      Questionnaire 标题条
      ===================================================== */
   .section-bar {
     height: 100px;
     background-color: rgb(172, 143, 106);
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   .section-bar h2 {
     font-family: 'Abhaya Libre ExtraBold', 'Noto Sans SC', 'Noto Sans JP', system-ui, sans-serif;
     font-size: 50px;
     font-weight: 400;
     color: rgb(251, 242, 219);
     margin: 0;
   }
   
   /* =====================================================
      问题区块
      ===================================================== */
   .question { padding: 60px 132px 80px; }
   .question.shaded { background-color: rgba(172, 143, 106, 0.2); }
   
   .q-title {
     font-family: 'Abhaya Libre ExtraBold', 'Noto Sans SC', 'Noto Sans JP', system-ui, sans-serif;
     font-size: 40px;
     font-weight: 400;
     line-height: 1.2;
     color: rgb(91, 59, 18);
     margin: 0 0 40px 0;
   }
   
   /* =====================================================
      选项
      ===================================================== */
   .options-grid {
     display: grid;
     gap: 38px 44px;
     margin-bottom: 50px;
   }
   .options-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
   .options-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
   
   .options-list {
     display: flex;
     flex-direction: column;
     gap: 36px;
     margin-bottom: 50px;
   }
   
   /* ---------- 选项按钮 ----------
      用 CSS 变量控制默认背景/文字/边框色，
      这样 .option-btn.selected 的样式才能正常覆盖
      （Q1 的热度着色通过 JS 写 CSS 变量实现） */
   .option-btn {
     --heat-bg:     transparent;
     --heat-color:  rgb(0, 0, 0);
     --heat-border: rgb(91, 59, 18);
   
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     min-height: 43px;
     padding: 10px 18px;
     font-family: 'Inter', 'Noto Sans SC', 'Noto Sans JP', system-ui, sans-serif;
     font-size: 16px;
     font-weight: 300;
     line-height: 1.3;
     color: var(--heat-color);
     background: var(--heat-bg);
     border: 2px solid var(--heat-border);
     border-radius: 10px;
     cursor: pointer;
     text-align: center;
     overflow: hidden;
     transition: background-color .2s ease,
                 color .2s ease,
                 border-color .2s ease,
                 transform .15s ease;
   }
   
   .option-btn:hover  { background: rgba(91, 59, 18, 0.08); }
   .option-btn:active { transform: scale(0.985); }
   
   /* 选中态 —— 权重更高，会覆盖掉 CSS 变量的默认值 */
   .option-btn.selected {
     background: rgb(91, 59, 18);
     border-color: rgb(91, 59, 18);
     color: #fff;
   }
   
   /* Q2 / Q3 提交后显示的百分比小角标 */
   .option-btn .vote-percent {
     position: absolute;
     right: 12px;
     top: 50%;
     transform: translateY(-50%);
     font-size: 13px;
     font-weight: 500;
     color: rgb(91, 59, 18);
     opacity: 0;
     transition: opacity .3s ease;
   }
   .option-btn.selected .vote-percent { color: #fff; }
   
   /* =====================================================
      提交按钮
      ===================================================== */
   .submit-btn {
     display: block;
     margin: 0 auto;
     width: 360px;
     height: 43px;
     background-color: rgb(91, 59, 18);
     color: rgb(255, 255, 255);
     font-family: 'Inter', 'Noto Sans SC', 'Noto Sans JP', system-ui, sans-serif;
     font-size: 20px;
     font-weight: 300;
     border: none;
     border-radius: 10px;
     cursor: pointer;
     transition: background-color .2s ease, transform .15s ease, opacity .2s ease;
   }
   .submit-btn:hover:not(:disabled)  { background-color: rgb(112, 74, 24); }
   .submit-btn:active:not(:disabled) { transform: scale(0.985); }
   .submit-btn:disabled { cursor: not-allowed; }
   
   /* =====================================================
      Q2 特殊布局
      ===================================================== */
   .q2-layout {
     display: flex;
     gap: 40px;
     align-items: flex-start;
     margin-bottom: 50px;
   }
   .q2-layout .options-list { flex: 0 0 700px; margin-bottom: 0; }
   .q2-image {
     flex: 1 1 auto;
     height: 383px;
     background-image: url(assets/752920f2e7e01885cae92030e6fdd397d0902ceb.png);
     background-size: cover;
     background-position: center;
   }
   
   /* =====================================================
      词云 —— 无背景、无椭圆
      ===================================================== */
   .wordcloud-chart {
     width: 100%;
     height: 440px;
     margin-top: 40px;
     display: none;                      /* 初始隐藏，提交后 block → 推挤下方内容 */
     animation: cloudFadeIn .6s ease;
   }
   
   @keyframes cloudFadeIn {
     from { opacity: 0; }
     to   { opacity: 1; }
   }
   
   /* =====================================================
      Q6 / Q7 填空
      ===================================================== */
   .sentence-box {
     width: 100%;
     border: 2px solid rgb(91, 59, 18);
     border-radius: 10px;
     padding: 24px 32px;
     margin-bottom: 40px;
     font-family: 'Abhaya Libre ExtraBold', 'Noto Sans SC', 'Noto Sans JP', system-ui, sans-serif;
     font-size: 26px;
     line-height: 1.3;
     color: rgb(91, 59, 18);
     text-align: center;
   }
   
   .sentence-label { font-size: 26px; margin-bottom: 10px; }
   
   .sentence-line {
     font-size: 26px;
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
     align-items: baseline;
     justify-content: center;
   }
   
   .inline-input {
     background: transparent;
     border: none;
     border-bottom: 2px dashed rgb(91, 59, 18);
     font-family: inherit;
     font-size: 24px;
     font-weight: 400;
     color: rgb(91, 59, 18);
     text-align: center;
     outline: none;
     padding: 0 6px;
     min-width: 120px;
     max-width: 260px;
   }
   .inline-input::placeholder { color: rgba(91, 59, 18, 0.45); }
   .inline-input:focus { border-bottom-color: rgb(140, 90, 30); }
   
   /* =====================================================
      答案列表
      ===================================================== */
   .answer-list-box {
     margin-top: 30px;
     min-height: 60px;
     max-height: 220px;
     overflow-y: auto;
     font-family: 'Inter', 'Noto Sans SC', 'Noto Sans JP', system-ui, sans-serif;
     font-size: 14px;
     line-height: 1.5;
     color: rgb(91, 59, 18);
     text-align: center;
     scrollbar-width: thin;
     scrollbar-color: rgb(91,59,18) rgba(91,59,18,0.08);
   }
   .answer-list-box .single-answer {
     padding: 6px 10px;
     animation: fadeSlideUp .35s ease;
   }
   .answer-list-box::-webkit-scrollbar { width: 6px; }
   .answer-list-box::-webkit-scrollbar-track {
     background: rgba(91,59,18,0.08);
     border-radius: 3px;
   }
   .answer-list-box::-webkit-scrollbar-thumb {
     background: rgb(91,59,18);
     border-radius: 3px;
   }
   
   @keyframes fadeSlideUp {
     from { opacity: 0; transform: translateY(6px); }
     to   { opacity: 1; transform: translateY(0); }
   }
   
   /* =====================================================
      字体
      ===================================================== */
   @font-face {
     font-family: 'Abhaya Libre ExtraBold';
     font-weight: 800;
     font-style: normal;
     src: url(fonts/AbhayaLibre-ExtraBold_1.woff2?v=db588ea6) format('woff2');
   }
   @font-face {
     font-family: 'Inter';
     font-weight: 300;
     font-style: normal;
     src: url(fonts/Inter_1.woff2?v=c5007bb6) format('woff2');
   }
   @font-face {
     font-family: 'Abril Fatface';
     font-weight: 400;
     font-style: normal;
     src: url(fonts/AbrilFatface-Regular_1.woff2?v=cc490f75) format('woff2');
   }