:root{
  --paper:#f7f3e8;
  --paper-2:#fffdf6;
  --ink:#16120e;
  --muted:#6c6459;
  --line:#d8ccba;
  --line-dark:#2a241d;
  --copper:#a86f38;
  --red:#a64236;
  --green:#315f53;
  --blue:#244f74;
  --shadow:0 24px 80px rgba(28,21,13,.16);
}
*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  font-family:"Microsoft YaHei","PingFang SC",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--ink);
  background:
    linear-gradient(90deg, rgba(22,18,14,.055) 1px, transparent 1px),
    linear-gradient(0deg, rgba(22,18,14,.045) 1px, transparent 1px),
    linear-gradient(135deg,#f2ecdf 0%,#fffdf6 42%,#e7eee9 100%);
  background-size:34px 34px,34px 34px,auto;
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(110deg,transparent 0 58%,rgba(166,65,54,.1) 58% 58.4%,transparent 58.4%),
    linear-gradient(72deg,transparent 0 23%,rgba(36,79,116,.12) 23% 23.3%,transparent 23.3%);
}
.noise{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.14;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}
.app{
  width:min(1120px,92vw);
  margin:0 auto;
  padding:42px 0 64px;
  position:relative;
  z-index:1;
}
.screen{display:none; animation:fade .32s ease}
.screen.active{display:block}
@keyframes fade{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:translateY(0)}}

.hero{
  min-height:86vh;
  display:none;
  grid-template-columns:minmax(0,1.02fr) minmax(360px,.78fr);
  gap:34px;
  align-items:center;
}
.hero.active{display:grid}
.badge{
  display:inline-flex;
  width:max-content;
  padding:7px 10px;
  border:1px solid var(--line-dark);
  background:rgba(255,253,246,.72);
  color:var(--green);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
}
h1{
  font-size:clamp(50px,8vw,98px);
  margin:18px 0 16px;
  line-height:.95;
  letter-spacing:0;
  font-weight:950;
}
.subtitle{
  font-size:21px;
  color:var(--muted);
  max-width:700px;
  line-height:1.72;
  margin:0 0 28px;
}
.mode-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  max-width:680px;
}
.mode-card{
  min-height:146px;
  text-align:left;
  padding:18px;
  border:1px solid var(--line-dark);
  border-radius:8px;
  background:rgba(255,253,246,.78);
  color:var(--ink);
  display:grid;
  align-content:space-between;
  box-shadow:0 16px 40px rgba(28,21,13,.08);
}
.mode-card span{
  font-family:Georgia,serif;
  font-size:42px;
  line-height:1;
  color:var(--copper);
}
.mode-card b{font-size:21px}
.mode-card small{color:var(--muted); line-height:1.5; font-weight:700}
.primary-mode{
  background:var(--ink);
  color:var(--paper-2);
}
.primary-mode small{color:#d8ccba}
.primary-mode span{color:#e2b26b}
.actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:24px}
.compact-actions{justify-content:flex-start}
button{font:inherit; border:0; cursor:pointer; transition:.18s ease; font-weight:900}
button:hover{transform:translateY(-2px)}
button:focus-visible{outline:3px solid rgba(166,65,54,.32); outline-offset:3px}
.primary,.ghost,.small{
  border-radius:8px;
  padding:13px 18px;
  border:1px solid var(--line-dark);
}
.primary{background:var(--ink); color:var(--paper-2); box-shadow:0 16px 36px rgba(28,21,13,.2)}
.ghost,.small{background:rgba(255,253,246,.72); color:var(--ink)}
.small{padding:8px 12px; font-size:14px}
.hint{color:var(--muted); font-size:14px; margin-top:18px}

.lineage-panel{
  min-height:560px;
  padding:20px;
  border:1px solid var(--line-dark);
  border-radius:8px;
  background:
    linear-gradient(90deg,rgba(22,18,14,.08) 1px,transparent 1px),
    linear-gradient(0deg,rgba(22,18,14,.06) 1px,transparent 1px),
    rgba(255,253,246,.74);
  background-size:28px 28px;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.panel-head,.report-top{
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:var(--green);
  font-size:12px;
  font-weight:950;
  letter-spacing:.08em;
  position:relative;
  z-index:1;
}
.milk-mark{
  position:absolute;
  right:16px;
  top:40px;
  font-size:170px;
  line-height:1;
  font-weight:950;
  color:rgba(166,65,54,.1);
}
.lineage-map{
  position:absolute;
  left:30px;
  right:30px;
  top:138px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.lineage-map i{
  height:44px;
  border:1px solid var(--line-dark);
  background:rgba(247,243,232,.82);
  position:relative;
}
.lineage-map i:nth-child(3n){background:rgba(49,95,83,.14)}
.lineage-map i:nth-child(4n){background:rgba(36,79,116,.12)}
.lineage-map i:nth-child(5n){background:rgba(166,65,54,.12)}
.lineage-map i:after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  top:50%;
  border-top:1px solid rgba(22,18,14,.38);
}
.tree-lines{
  position:absolute;
  left:54px;
  right:54px;
  bottom:100px;
  height:132px;
  border-left:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
}
.tree-lines span{
  position:absolute;
  left:0;
  width:100%;
  border-top:1px solid var(--line-dark);
}
.tree-lines span:nth-child(1){top:18px; width:44%}
.tree-lines span:nth-child(2){top:48px; width:68%}
.tree-lines span:nth-child(3){top:82px; width:52%}
.tree-lines span:nth-child(4){top:116px; width:88%}
.lineage-panel p{
  position:absolute;
  left:20px;
  bottom:20px;
  margin:0;
  color:var(--muted);
  font-weight:900;
}

.quiz-head,.species-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:22px;
  margin-bottom:16px;
}
.quiz-head h2,.species-head h1{
  font-size:clamp(34px,5vw,56px);
  margin:8px 0 0;
  letter-spacing:0;
  line-height:1.08;
}
.count{color:var(--red); font-weight:950; letter-spacing:.08em}
.progress{
  height:8px;
  background:rgba(255,253,246,.7);
  border:1px solid var(--line-dark);
  overflow:hidden;
  margin-bottom:16px;
}
#progressBar{
  height:100%;
  width:0;
  background:linear-gradient(90deg,var(--green),var(--copper),var(--red));
  transition:.25s ease;
}
.question-card,.result-card,.species-card{
  background:rgba(255,253,246,.8);
  border:1px solid var(--line-dark);
  border-radius:8px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(16px);
}
.question-card{padding:28px}
.question-label{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--green);
  font-size:12px;
  font-weight:950;
  letter-spacing:.12em;
  margin-bottom:14px;
}
.question-label:after{
  content:"";
  height:1px;
  flex:1;
  background:var(--line);
}
.question-card p{
  font-size:21px;
  line-height:1.88;
  white-space:pre-line;
  margin:0 0 24px;
}
.options{display:grid; grid-template-columns:1fr; gap:10px}
.option{
  background:rgba(247,243,232,.74);
  border:1px solid var(--line);
  border-left:5px solid transparent;
  border-radius:8px;
  text-align:left;
  padding:17px 18px;
  color:var(--ink);
  line-height:1.58;
  font-weight:850;
}
.option:hover{
  border-color:var(--line-dark);
  border-left-color:var(--red);
  background:var(--paper-2);
  box-shadow:0 12px 24px rgba(28,21,13,.1);
}

.result-screen{max-width:900px; margin:0 auto}
.result-card{
  padding:30px;
  position:relative;
  overflow:hidden;
}
.result-card:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(22,18,14,.055) 1px,transparent 1px),
    linear-gradient(0deg,rgba(22,18,14,.045) 1px,transparent 1px);
  background-size:26px 26px;
  pointer-events:none;
}
.result-card h1{
  font-size:clamp(42px,7vw,76px);
  margin:18px 0 8px;
  position:relative;
  z-index:1;
}
.role{
  font-size:21px;
  font-weight:950;
  color:var(--red);
  margin:0 0 16px;
  position:relative;
  z-index:1;
}
.route{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px;
  padding:13px 14px;
  border:1px solid var(--line);
  background:rgba(247,243,232,.72);
  font-weight:950;
  color:var(--green);
  position:relative;
  z-index:1;
}
.desc{
  font-size:18px;
  line-height:1.8;
  color:var(--muted);
  position:relative;
  z-index:1;
}
.quote{
  font-size:22px;
  line-height:1.65;
  font-weight:950;
  padding:18px;
  border-left:5px solid var(--red);
  background:rgba(255,253,246,.78);
  margin:20px 0;
  position:relative;
  z-index:1;
}
.gene-total{
  color:var(--green);
  font-weight:950;
  margin:0 0 12px;
  position:relative;
  z-index:1;
}
.gene-caption,.bar-row{
  display:grid;
  grid-template-columns:120px 1fr 54px;
  gap:12px;
  align-items:center;
  position:relative;
  z-index:1;
}
.gene-caption{
  color:var(--muted);
  font-size:11px;
  font-weight:950;
  letter-spacing:.1em;
  margin-bottom:8px;
}
.bars{display:grid; gap:8px; position:relative; z-index:1}
.bar-row{font-weight:900}
.bar-row.zero{opacity:.46}
.track{
  height:12px;
  background:rgba(216,204,186,.8);
  border:1px solid rgba(22,18,14,.12);
  overflow:hidden;
}
.fill{
  height:100%;
  background:linear-gradient(90deg,var(--green),var(--copper),var(--red));
}
.result-actions{margin-bottom:6px}

.species-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.species-card{
  padding:16px;
  box-shadow:0 16px 36px rgba(28,21,13,.08);
  min-height:190px;
}
.species-card h3{font-size:22px; margin:0 0 8px}
.species-card .tag{color:var(--red); font-weight:950; margin-bottom:10px}
.species-card p{color:var(--muted); line-height:1.68; margin:0; font-size:14px}

@media(max-width:860px){
  .hero{grid-template-columns:1fr; padding-top:20px}
  .lineage-panel{min-height:390px}
  .lineage-map{top:92px}
  .tree-lines{bottom:70px}
  .quiz-head,.species-head{align-items:stretch; flex-direction:column}
  .species-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .app{width:94vw; padding-top:22px}
  .mode-grid{grid-template-columns:1fr}
  .lineage-panel{min-height:330px}
  .lineage-map{grid-template-columns:repeat(2,1fr)}
  .question-card,.result-card{padding:20px}
  .question-card p{font-size:18px}
  .species-grid{grid-template-columns:1fr}
  .gene-caption,.bar-row{grid-template-columns:88px 1fr 44px; font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important; transition:none!important}
}