:root { --bg:#c2b69b; --text:#444; --line:rgba(68,68,68,.25); }
* { box-sizing:border-box; }
body { 
  margin:0; 
  background:var(--bg); 
  color:var(--text); 
  font-family:Arial,Helvetica,sans-serif; 
}

.preference-page { 
  width:min(1100px,calc(100% - 48px)); 
  margin:auto; padding:32px 0 38px; 
}

.preference-page-header { 
  margin-bottom:18px; 
}

.eyebrow { 
  margin:0 0 5px; 
  color:var(--text); 
  font-size:9px; 
  font-weight:700; 
  letter-spacing:.18em; 
}

.preference-page-header h1 {
   margin:0; color:#171717; 
   font-size:clamp(32px,4vw,44px); 
   font-weight:900; 
   letter-spacing:-.03em;
   }


.preference-page-header p:not(.eyebrow) {
   margin:8px 0 0; 
   color:var(--text); 
   font-size:12px; 
   line-height:1.6; 
  }


.back-link { 
  display:inline-block; 
  margin-bottom:24px; 
  padding:0; 
  color:var(--text); 
  font-size:12px; 
  font-weight:700; 
  letter-spacing:.12em; 
  text-decoration:none;
}

.back-link:hover { 
  text-decoration:underline; 
}


.back-link:focus-visible {
   outline:2px solid var(--text);
   outline-offset:6px; 
  }


.preference-page-card { 
  padding:20px 0; 
  background:transparent; 
  border:0; 
  border-radius:0; 
}


.analysis-conditions { 
  display:grid; 
  grid-template-columns:repeat(2,minmax(0,220px)); 
  justify-content:center; 
  gap:12px 18px; 
}


.analysis-conditions label { 
  display:flex; 
  flex-direction:column; 
  gap:6px; color:var(--text); 
  font-size:12px; 
}


.analysis-conditions select { 
  width:100%; 
  height:38px; 
  padding:8px 12px;
  background:transparent; 
  color:var(--text);
  border:3px solid #444; 
  border-radius:6px; 
  font-family:inherit; 
  font-size:12px; 
  font-weight:400; 
  line-height:16px; 
  cursor:pointer; 
}


.analysis-conditions select:focus-visible {
   outline:2px solid var(--text); 
   outline-offset:3px; 
  }


.selected-conditions { 
  margin:13px 0 3px; 
  color:var(--text); 
  font-size:12px; 
  text-align:center;
 }


.status-message { 
  margin:0 0 10px; 
  color:var(--text); 
  font-size:12px; 
  line-height:1.55; 
  text-align:center; 
}


.chart-wrap { 
  position:relative; 
  width:min(520px,100%); 
  height:350px; 
  margin:8px auto 16px; 
}


.number-card { 
  width:min(520px,100%); 
  margin:auto; 
  padding:13px 16px; 
  background:transparent; 
  border:3px solid #444; 
  border-radius:6px; 
}


.number-card h2 { 
  margin:0 0 9px; 
  font-size:15px; 
  font-weight:600;
  text-align:center; 
}


.number-grid { 
  display:grid; 
  grid-template-columns:repeat(2,1fr); 
  gap:6px 18px; 
}


.number-grid span { 
  display:flex; 
  justify-content:space-between; 
  color:var(--text); 
  font-size:12px; 
}


.number-grid strong { 
  color:var(--text); 
}

[hidden] { 
  display:none !important;
 }

@media (max-width:700px) {
  .preference-page { 
    width:min(100% - 28px,1100px);
    padding:22px 0 32px; 
  }

  .preference-page-card { 
    padding:18px 0; 
  }

  .analysis-conditions { 
    grid-template-columns:1fr;
  }

  .chart-wrap { 
    height:300px; 
    margin:10px auto 18px; 
  }

  .number-grid { 
    grid-template-columns:1fr; 
  }

  }